vue基礎第一節

https://cn.vuejs.org/ 點擊“安裝”下載開發版本

或者使用在線版本

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.第一個簡單的小例子 hello world，一個是js的，一個是vue的，vue只關心數據

<script src="./vue.js"></script>
<div id="app">{{content}}</div>
<script>
    // var dom = document.getElementById("app");
    // dom.innerHTML = "hello world";
    var app = new Vue({
        el: "#app",
        data: {
            content:"hello world1"
        }
    })
</script>

2秒換文字 

<script src="./vue.js"></script>
<div id="app">{{content}}</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            content:"hello world1"
        }
    })
    setTimeout(function(){
        app.$data.content = 'bye world';
    }, 2000)
</script>
--------------------------------------------
<script src="./vue.js"></script>
<div id="app">{{content}}</div>
<script>
    var dom = document.getElementById("app");
    dom.innerHTML = "hello world";
    setTimeout(function(){
        dom.innerHTML = "bye world";
    }, 2000)
</script>

第二個簡單的小例子

官網介紹：

我們可以用 v-for 指令基於一個數組來渲染一個列表。v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。

<script src="./vue.js"></script>
<div id="app">
    <input type="text">
    <button>提交</button>
    <ul>
<!--循環list裏面的內容，把list中的每一項當成list循環，item & list可以替換成對應的，in不可-->
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            list:['第一課內容','第二課內容','121']
        }
    })
</script>

例2.1

<script src="./vue.js"></script>
<div id="app">
    <!--
    可以在瀏覽器測試
    app.$data.inputValue 獲取輸入框的值
    "1231"
    app.$data.inputValue=12345567 設置輸入框的值
    12345567
    -->
    <!--v-model模板指令 數據雙向綁定 這裏發生變化，data裏亦發生變化-->
    <input type="text" v-model="inputValue">
    <!--在模板button綁定個click事件，執行個函數-->
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            list:[],
            inputValue:''//雙向綁定標籤
        },
        methods:{
            handleBtnClick:function(){
                // alert(this.inputValue);//打印就是data的inputValue,雙向綁定
                this.list.push(this.inputValue);//.push添加
                this.inputValue='';
            }
        }
    })
</script>

例3--全局組件&局部組件

<script src="./vue.js"></script>
<div id="app">
    <!--v-model模板指令 數據雙向綁定 這裏發生變化，data裏亦發生變化-->
    <input type="text" v-model="inputValue">
    <!--在模板button綁定個click事件，執行個函數-->
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
        <!-- <li v-for="item in list">{{item}}</li> -->
        <!--循環list，把每一項值賦值給item，再把item通過v-bind形式傳給todo-item,通過content來傳-->
        <todo-item v-bind:content="item" v-for="item in list"></todo-item>
    </ul>
</div>
<script>
    //全局組件
    Vue.component("TodoItem",{
        //props從父組件接收一些content參數，子組件就可以接收content的值
        props:['content'],
        //記得用查詢表達式方式
        template: "<li>{{content}}</li>"
    })
    //局部組件，但要在new裏註冊一下
    //var TodoItem = {
        //props:['content'],
        //template: "<li>{{content}}</li>"
    //}

    var app = new Vue({
        el: "#app",
        //註冊的那部分
        //components: {
            //TodoItem: TodoItem
        //},
        data: {
            list:[],
            inputValue:''//雙向綁定標籤
        },
        methods:{
            handleBtnClick:function(){
                // alert(this.inputValue);//打印就是data的inputValue,雙向綁定
                this.list.push(this.inputValue);//.push添加
                this.inputValue='';
            }
        }
    })
</script>

例3.1  點擊刪除

<script src="./vue.js"></script>
<div id="app">
    <!--v-model模板指令 數據雙向綁定 這裏發生變化，data裏亦發生變化-->
    <input type="text" v-model="inputValue">
    <!--在模板button綁定個click事件，執行個函數-->
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
        <!-- <li v-for="item in list">{{item}}</li> -->
        <!--循環list，把每一項值賦值給item，再把item通過v-bind形式傳給todo-item,通過content來傳-->
        <todo-item v-bind:content="item"  
                   v-bind:index="index"
                   v-for="(item, index) in list"
                   @delete="handleItemDelete"></todo-item>
    </ul>
</div>
<script>
    var TodoItem = {
        props:['content','index'],
        template: "<li @click='handleItemClick'>{{content}}</li>",
        methods: {
            handleItemClick: function() {
                //監聽事件，當點擊時，向外觸發一個delete事件
                this.$emit("delete",this.index)
            } 
        }
    }
    var app = new Vue({
        el: "#app",
        components:{
            TodoItem:TodoItem
        }, 
        data: {
            list:[],
            inputValue:''//雙向綁定標籤
        },
        methods:{
            handleBtnClick:function(){
                // alert(this.inputValue);//打印就是data的inputValue,雙向綁定
                this.list.push(this.inputValue);//.push添加
                this.inputValue='';
            },
            handleItemDelete :function(index){
                this.list.splice(index, 1);
                // console.log(index);
            }
        }
    })
</script>