Vue的入門學(xué)習(xí)筆記(一)

Vue.js 官網(wǎng)教程：https://cn.vuejs.org/v2/guide/
B站Vue.js入門教學(xué)視頻：https://www.bilibili.com/video/BV18E411a7mC?p=6

idea插件的安裝

1.Plugins搜索vue 安裝即可。
項目如何創(chuàng)建Vue Component組件：

image.png

如果沒有Vue Component，設(shè)置模板里新增。詳細(xì)操作可以看：https://blog.csdn.net/jdq8576/article/details/104055707/
image.png

CDN的方式引入Vue.js

完整版：<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
簡版：<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

cdn如何引入vue.js詳細(xì)介紹：https://blog.csdn.net/Mrs_chens/article/details/103295707

Vue基本語法

vue的7個屬性
el屬性
用來指示vue編譯器從什么地方開始解析 vue的語法，可以說是一個占位符。
data屬性
用來組織從view中抽象出來的屬性，可以說將視圖的數(shù)據(jù)抽象出來存放在data中。
template屬性
用來設(shè)置模板，會替換頁面元素，包括占位符。
methods屬性
放置頁面中的業(yè)務(wù)邏輯，js方法一般都放置在methods中
render屬性
創(chuàng)建真正的Virtual Dom
computed屬性
用來計算
watch屬性
watch:function(new,old){}
監(jiān)聽data中數(shù)據(jù)的變化
兩個參數(shù)，一個返回新值，一個返回舊值，

  1. if 和 for 的使用
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view層 模板-->
<div id="app">
<!-- 取值方式1-->
    {{message}}
    <br>

<!--2.綁定的方式-->
    <span v-bind:title="message">
        懸停綁定信息
    </span>

<!-- if else-->
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>

<!-- if elseif elseif-->
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>Z</h1>

<!--for循環(huán)  以及index 下標(biāo)用法-->
    <li v-for="item in items">
        {{item.message}}
    </li>
    <li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    </li>
</div>

<!--導(dǎo)入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
        // Model：數(shù)據(jù)
       data:{
           message: "Hello Vue!",
           ok: true,
           type: 'A',
           items: [
               {message: "參數(shù)1"},
               {message: "參數(shù)2"},
               {message: "參數(shù)3"}
           ]
       }
    });
</script>
</body>
</html>
image.png

v-bind: 可以簡寫為 :
v-on:click可以簡寫為 @click

  1. 綁定事件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view層 模板-->
<div id="app">

    <button v-on:click="say">click</button>

</div>

<!--導(dǎo)入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
        // Model：數(shù)據(jù)
       data:{
           message: "Hello Vue!"
       },
        // 方法必須定義在Vue的Methods對象中, 用 v-on: 事件調(diào)用
        methods: {
           say: function () {
                alert(this.message);
           }
        }
    });
</script>
</body>
</html>
  1. 雙向綁定
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view層 模板-->
<div id="app">

    輸入文本:<input type="text" v-model="message">{{message}}
    <br>

    性別:    <input type="radio" name="sex" value="男" v-model="testradio">男
            <input type="radio" name="sex" value="女" v-model="testradio">女
    選中了：{{testradio}}
    <br>

    <select name="" id=""  v-model="testselect">
        <option value="" disabled>--請選擇--</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    選中了：{{testselect}}

</div>

<!--導(dǎo)入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
       data:{
           message: "123",
           testradio: '',
           testselect:''
       }
    });
</script>
</body>
</html>
image.png
  1. Vue組件
    Vue組件的官網(wǎng)詳細(xì)介紹:https://cn.vuejs.org/v2/guide/components-registration.html
    Prop屬性的詳細(xì)介紹:https://cn.vuejs.org/v2/guide/components-props.html 
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <!--組件:傳遞給組件中的值: props-->
    <testcomponet v-for="item in items" v-bind:salt="item"></testcomponet>

</div>

<!--導(dǎo)入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    // 定義一個Vue組component, 第一個參數(shù)為自定義的組件名稱
    Vue.component("testcomponet",{
        // props屬性 用來傳遞參數(shù)(這里是v-bind綁定的數(shù)據(jù)),自定義綁定名稱
        props: ['salt'],
        template: '<li>{{salt}}</li>'
    });

    var vm = new Vue({
       el: "#app",
       data:{
           items: ["java","vue","react"]
       }
    });
</script>
</body>
</html>
image.png
  1. 計算屬性
    計算屬性的主要特性就是為了將不經(jīng)常變化的計算結(jié)果進行緩存，以節(jié)約系統(tǒng)開銷.
    官網(wǎng)關(guān)于計算屬性的詳解:https://cn.vuejs.org/v2/guide/computed.html 
<script>
    var vm = new Vue({
        el: "#app",
        // Model：數(shù)據(jù)
        data:{
            message: "Hello Vue!"
        },
        // 方法必須定義在Vue的Methods對象中, 用 v-on: 事件調(diào)用
        methods: {
            currenttime1: function () {
                return Date.now();
            }
        },
        computed: {
            //計算屬性 可以想象成緩存，如果里面的值沒有變化，下次就可以直接加載.
            currenttime2: function () {
                return Date.now();
            }
        }
    });
</script>
  1. 插槽
    官網(wǎng)介紹:https://cn.vuejs.org/v2/guide/components-slots.html 
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in items" :item="item"></todo-items>
    </todo>

</div>

<!--導(dǎo)入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    // slot 插槽
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                       </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item'],
        template: '<div>{{item}}</div>'
    });


    var vm = new Vue({
        el: "#app",
        data:{
            title: "參數(shù)列表",
            items: ["java","vue","react"]
        }
    });
</script>
</body>
</html>
image.png
  1. 自定義事件:
    關(guān)于組件基礎(chǔ)官網(wǎng)文檔:https://cn.vuejs.org/v2/guide/components.html
    這邊有一點需要注意的是,每一個component組件中的data必須是一個函數(shù),互不影響,↑文檔中有詳細(xì)解釋.
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in items" :item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>

</div>

<!--導(dǎo)入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    // slot 插槽
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                       </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item','index'],
        template: '<li>{{index}}---{{item}} <button @click="remove">刪除</button></li>',
        methods: {
            remove: function (index) {
                this.$emit('remove',index);
            }
        }
    });


    var vm = new Vue({
        el: "#app",
        data:{
            title: "參數(shù)列表",
            items: ["java","vue","react"]
        },
        methods: {
            removeItems: function (index) {
                this.items.splice(index,1);//下標(biāo)1 即為刪除當(dāng)前元素
            }
        }
    });
</script>
</body>
</html>
image.png

vue-axios實現(xiàn)異步通信(等同于ajax)

中文官網(wǎng):http://www.axios-js.com/zh-cn/docs/vue-axios.html
CDN方式引入Axios:
Axios：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--v-clock解決閃爍問題-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app" v-clock>

    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <a v-bind:href="info.url">點擊</a>

</div>

<!--導(dǎo)入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    var vm = new Vue({
       el: "#app",
        //data 屬性 :vm
        data(){
           return{
               //請求返回的參數(shù)格式,必須和json字符串一樣
               info: {
                   name: null,
                   address: null,
                   url: null
               }
           }
        },
       mounted(){
           //鉤子函數(shù)
           axios.get('../data.json').then(response=>(this.info=response.data));
       }
    });
</script>
</body>
</html>

data.json文件內(nèi)容
{
  "name": "salt",
  "address": "jianshu",
  "url": "http://www.itdecent.cn/u/a8170bf39a33"
}
image.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容