第一天学习vue,主要是把官网介绍里面的案例走了一遍，等逛街回来继续学习，加油。
- 引入
创建html页面，引入js,vue-cli暂时不用，等用的成熟一些了再说。 - 解读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>'
});
- 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>
