初學Vue

vue的介紹與應用

介紹

Vue是一款mvvm框架，是由模型視圖視圖模型組成的，全程model-view-viewmodel。

帶有前綴 v-的是指令

Vue.js 的語句

v-on:事件

v-for 循環語句

v-if 判斷

v-model在input標籤中用到

應用

一、聲明式渲染

第一個vue 的例子

<div id="add">{{mgs}}</div>
<script>
    var add = new Vue({
        el:'#add',
        data:{
            mgs:'Vue示例操做'
        }
    });
</script>
打印結果
Vue示例操做

第二個vue 的例子

<div id="app">
<!-- v-bind動態綁定一個或多個屬性 -->
<span v-bind:title="message" v-bind:style="aa">
    鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
</span>
</div>
<script>
var app = new Vue({
    el:"#app",
    data:{
        //鼠標放上去顯示當前時間
        message:'頁面加載於 ' + new Date().toLocaleString(),
        aa:"color:red"
    }
});
</script>

打印結果

二、條件與循環

條件用到的是v-if指令

【案例】

<!-- 條件 -->
<div id="app">
    <h1 v-if="kanjian">我能看到</h1>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            kanjian:true
        }
    });
</script>

循環用到的是v-for指令

【案例】

<!-- 循環 -->
<div id="app1">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>
<script>
//循環
var app1 = new Vue({
    el:"#app1",
    data:{
        todos:[
            {text:"學習Vue"},
            {text:"學習node"},
            {text:"學習jQuery"}
        ]
    }
});
</script>

下面是上面案例的打印結果

三、處理用戶輸入

v-on指令是綁定一個事件監聽

【案例】

<!-- 消息逆轉案例 -->
<div id="app">
    <h1>{{message}}</h1>
    <input type="button" value="點擊" v-on:click = "dianji">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello Vue!"
        },
        methods:{
            dianji:function(){
                this.message=this.message.split("").reverse().join("")
            }
        }
    });
</script>
打印結果
!euV olleh

四、組件化應用構建

Vue 中怎麼註冊組件

【案例】

<!-- vue註冊組件 -->
<div id="app">
    <tou name="我是頭部的名字"></tou>
    <zhong></zhong>
    <xia></xia>
</div>
<script>
    Vue.component('tou', {
        props: ['name'],
        template: '<h4>我是頭部 {{name}}</h4>'
    })
    Vue.component('zhong', {
        template: '<h4>我只中部</h4>'
    })
    Vue.component('xia', {
        template: '<h4>我是下部</h4>'
    })
    var app = new Vue({
        el:"#app"
    });
</script>

如何使用v-bind 指令將 todo 傳到每個重複的組件中

【案例】

<ol>
    <todo-item name="item.text" v-for="(item , index) in todos" key="index"></todo-item>
</ol>
<script>
    Vue.component('todo-item',{
        props:['name'],
        template:'<li>{{name}}</li>'
    });
    
    var app = new Vue({
        el:"#app",
        data:{
            todos:[
                {text:'吃飯'},
                {text:'睡覺'},
                {text:'打豆豆'}
            ]
        }
    });
</script>

如下圖片是上面的打印結果

https://wujian1994.github.io/vue
https://github.com/wujian1994...

喜歡的朋友能夠點贊奧