01-初识vue

第一天学习vue,主要是把官网介绍里面的案例走了一遍，等逛街回来继续学习，加油。

1. 引入
   创建html页面，引入js,vue-cli暂时不用，等用的成熟一些了再说。
2. 解读js代码

// 给组件定义信息和事件
 var app1 = new Vue({
        el: "#app1",    //组件id或者class,不建议直接用标签选择器
         //给组件传递或者初始化的信息
        data: {
            message: "hello vue"，
            lis2: { id: 0, text: '222' },
                 { id: 1, text: '444' },
                 { id: 2, text: '666' }
        },
        //一些事件操作
        methods: {
            alert1: function () {
                alert("1111");
            },
            reverseWord: function () {
                this.msg = this.msg.split("").reverse().join("");
            }
        }
    });

// 给组件添加通用模板
  //这样添加的都是同样的一句话，不适合。
  Vue.component('todoitem1', {
        template: '<li>这是todoitem1列表内容</li>'
    });
  //这个是自定义了模板，可以通过元素的v-bind:props值='要循环的item', 把数据传递过来。
  Vue.component('todoitem2', {
        props:["todo"],  //这个阅读到后面可能更清楚一些，我这里理解的就是将父级的列表数据都拿过来，作为通用
        template: '<li>{{todo.id}}:{{todo.text}}</li>'
    });

3. vue指令

<!--v-bind:+元素自有属性 作为标签的属性，用于从js内读取并绑定信息-->
<div id="app2" v-bind:title="message">
    停留看消息！
</div>
<!--v-if  控制元素显示|移除 对应js里面visible的值是true|false-->
<div id="app3" v-if="visible">
    你可以看到我么？
</div>
<!--v-for  用于循环数组-->
<div id="app4">
    <ol>
        <li v-for="li in lis">{{li}}</li>
    </ol>
    <ul>
        <li v-for="li2 in lis2">{{li2.text}}</li>
    </ul>
</div>
<!--v-on:click 用于用户给该元素添加click事件-->
<div id="app5">
    <p>{{msg}}</p>
    <button v-on:click="reverseWord">点我翻转上文</button>
    <button v-on:click="alert1">点我啊！</button>
</div>
<!--v-model 用于给用户输入和显示内容的双向绑定-->
<div id="app6">
    <input type="text" v-model="msgs"/>
    <p>{{msgs}}</p>
</div>
<!--自定义组件-->
<div id="app7">
    <h5>如果是统一的</h5>
    <ul>
        <todoitem1 v-for="li in groceryList">{{li}}</todoitem1>
    </ul>
    <h5>如果改成可以改动的模板</h5>
    <ul>
        <!--页面上显示不出来li的key属性,是因为li没有key的属性，但是别的自定义属性可以出来（data-key），所以忽略了。对于key还不太明白，,后面再来补充-->
        <todoitem2 v-for="li in groceryList"  v-bind:key="li.id" v-bind:todo="li"></todoitem2>
    </ul>
</div>