Vue.js教程_1

1. Vue核心：允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
2. Vue实例中绑定的数据是响应式的：在浏览器的Console中修改app.message="hello world",网页中内容会实时改变。
3. Vue文本插值：

   <div id="app">
       {{ message }}
   </div>
   
   var app = new Vue({
       el: "#app",
       data: {
           message: "hello Vue!"
       }
   })
   

4. 指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为。<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息! </span>该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。在浏览器的Console中修改为该id创建的Vue实例.message="hello hello",网页中内容会实时改变。
5. 条件v-if 例如：

   <div id="app-3">
      <p v-if="seen">现在你看到我了</p>
   </div>
   var app3 = new Vue({
    el: "#app-3",
    data:{
        seen: true
     }
   })
   app3.seen=false; //可以在代码中任意赋值和修改。
   

6. 循环v-for：使用示例

   <ol>
         <li v-for="todo in todos">
         {{ todo.text }}
         </li>
   </ol>
   var app4 = new Vue({
     el: "#app-4",
     data:{
         todos:[
             {text: "learning JavaScript"},
             {text: "learning Vue"},
             {text: "do some project"}
         ]
     }
   })
   

对于添加或者删除元素：1)： app4.todos.push({text:"new project"}); 2)：app4.todos.pop()

7. 处理用户输入：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.js!'
       },
       methods: {
           reverseMessage: function () {
               this.message = this.message.split('').reverse().join('')
           }
       }
   })
   

8. 表单输入与应用状态之间的双向绑定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!'
     }
   })
   

9. 组件系统：组件：小型、可复用，使用组件前先定义和注册。

   // 定义名为 todo-item 的新组件
   Vue.component('todo-item', {
     template: '<li>这是个待办项</li>'
   })
   var app = new Vue(...)