Vue.js学习笔记：第一课

       通过对Vue.js官网的学习和研究，我总结出以下的一些小知识点，说出来跟在座的各位分享一下这些前端框架的知识，作为一个初学者来说，启动vue-cli这个东西去学习vue是件不容易的事情，因为对vue各种功能，组件，框架，套路并不熟悉，还是需要通过对官网中一些细小知识点的总结和学习慢慢深入对vue整体的学习，希望各位早日可以看懂vue大多数的代码，写出一个自己的vue前端或者整体的网站项目架构。

      在此对vue的下载和引入就不便细说，自行百度。也许以后的笔记中会详细讲述，不过现在不会讲，现在只探寻其中的应用和知识。

      <div id="app-1">{{message}}</div> 这是一段html的代码，id属性为app-1，都知道在html中id属性是一个标签唯一的值，还有就是{{ }}双大括号与其中的内容message，这个是动态绑定<div>的内容，也就是在页面中显示出来的值，其内容通过vue.js去实现。

       var app1 = new Vue({el:"#app-1",data:{message:"Hello Vue!"}})  这是一段Vue的代码，也就是写在JS中的一段代码，这个

new Vue就是表示使用Vue这个框架，而el就是element，表示绑定和声明是属性id=app-1<div>标签，id值用#app-1，学过CSS的人应该很清楚这块知识点，data就是数据部分，这个类似于json的东西，就是将message的属性进行赋值的，"Hello Vue!"就是在启动代码后可以完全显示在前台页面上的东西，"Hello Vue!"。

 

       v-bind：用来绑定盒子标签的内部属性，什么意思，看下面代码：

       <div id="app-2"><span v-bind:title="message">我爱我家</span></div> 这段html代码绑定了<span>标签的title属性，即鼠标悬停在<span>标签上的时候会出现的内容，

        var app-2 = new Vue({el:"#app-2",data:{message:"页面加载于 "+new Date().toLocaleString()}})这个就是对message的赋值，在页面加载的时候，将鼠标悬停在 "我爱我家" 这个内容上的时候，就会出现当前时间的显示。

      

        v-if：这是一个if判断语句，值可以是true或者false，这个判断语句的值是用来切换这个盒子标签是否能看的见的，怎么说呢?

        <div id="app-3"><p v-if="seen">   你现在能看见我</p></div>  这个<p>标签中v-if的值被封为seen

       var app3 = new Vue({el:"#app-3",data:{seen:true}})  seen的值为true这个标签是可以看得见的，如果是false就消失了，消失是指整个<div>都没了，彻底隐藏起来，类似于CSS中的 display: none。

       v-for：for循环语句显示效果，

      <div id="app-4"><ol><li v-for="todo in todos">{{todo.text}}</li></ol></div> 这个就是用for循环来循环产生<li>标签的一个例子

     var app4 = new Vue({el:"#app-4",data:{todos:[{text:"学习javascript"},{text:"Vue真有意思"},{text:"HTML语言好美"}]}})

       这个就是将todos的内容封装成一个类似于json格式的变量，然后通过todo这个东西去循环遍历todos中的内容，对于变量todo的理解，学过Java的人都知道这是for(i in arr) 循环遍历数组中的内容，对吧？

      

        v-on:用来动态绑定函数，监听事件的。

        <div id="app-5"><p>{{message}}</p><button v-on:click="reverseMessage">消息逆转</button></div>

        var app5 = new Vue({el:"#app-5",data:{message:"Hello Vue!"},methods:{reverseMessage:function(){this.message = this.message.split('').reverse().join('')}}})

          这个就是点击button之后，将<p>标签里的内容message进行倒置修改。

 

          v-model：实现了内容输入和表单输入之间的双向动态绑定。

          <div id="app-6"><p>{{message}}</p><input v-model="message" /></div>

          var app6 = new Vue({el:"#app-6",data:{message:"Hello Vue!"}})

          这个message中的"Hello Vue!"不过初始化赋值，当我们修改表单中的内容时，修改成什么样子，<p>标签中的内容都会跟着修改。

          接下来就是组件的问题，在Vue中最重要的就是组件的应用，现在这里粗略的讲一下，有个大概的印象，

          <div id="app-7"><ol><todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item></ol></div>

          Vue.component("todo-item",{props:["todo"],template:"<li>{{todo.text}}</li>"})

          var app7 = new Vue({el:"#app-7",data:{groceryList:[{id:0,text:"蔬菜"},{id:1,text:"奶酪"},{id:2,text:"西红柿"}]}})

          其中<todo-item>是我自创的一个标签，是按照<li>作为模板template来创建的,props:["todo"]，todo是我给todo-item这个自创标签创建的一个内部属性元素。而v-for循环遍历data中的groceryList这个元组，v-bind绑定内部属性todo被item赋值，然后还需要绑定一个key="item.id"，就是groceryList中的id属性，具体干什么的以后的笔记中再说。

           好，第一课就到这里，下期再见。