初学Vue.js

声明式渲染

 1 <div id="app">
 2   {{ message }}
 3 </div>
 4 
 5 var app = new Vue({
 6   el: '#app',
 7   data: {
 8     message: 'Hello Vue!'
 9   }
10 })

Vue中数据和DOM建立了关联，所有东西都是响应式的，在javaScript控制台中对app.message的值进行修改，会看到相应的更新。

 1 <div id="app-2">  2 <span v-bind:title="message">  3  鼠标悬停几秒钟查看此处动态绑定的提示信息！  4 </span>  5 </div>  6 var app2 = new Vue({  7  el: '#app-2',  8  data: {  9  message: '页面加载于 ' + new Date().toLocaleString() 10  } 11 })

v-bind:xxx用于绑定元素节点属性，将元素中的xxx属性与Vue实例中的绑定元素属性保持一致

条件与循环

1 <div id="app-3"> 2 <p v-if="seen">现在你看到我了</p> 3 </div> 4 var app3 = new Vue({ 5  el: '#app-3', 6  data: { 7  seen: true 8  } 9 })

v-if=“”用于设置条件，Vue实例中可对条件属性进行修改

 1 <div id="app-4">  2 <ol>  3 <li v-for="todo in todos">  4  {{ todo.text }}  5 </li>  6 </ol>  7 </div>  8 var app4 = new Vue({  9  el: '#app-4', 10  data: { 11  todos: [ 12  { text: '学习 JavaScript' }, 13  { text: '学习 Vue' }, 14  { text: '整个牛项目' } 15  ] 16  } 17 })

v-for=“item in items” 声明循环变量：items， item为循环变量中的元素，Vue实例中对items整个循环变量进行赋值

处理用户输入

 1 <div id="app-5">  2 <p>{{ message }}</p>  3 <button v-on:click="reverseMessage">逆转消息</button>  4 </div>  5 var app5 = new Vue({  6  el: '#app-5',  7  data: {  8  message: 'Hello Vue.js!'  9  }, 10  methods: { 11  reverseMessage: function () { 12  this.message = this.message.split('').reverse().join('') 13  } 14  } 15 })

v-on: 事件监听器，通过他可以调用Vue实例中的方法

 1 <div id="app-6">  2 <p>{{ message }}</p>  3 <input v-model="message">  4 </div>  5 var app6 = new Vue({  6  el: '#app-6',  7  data: {  8  message: 'Hello Vue!'  9  } 10 })

v-model指令提供了双向绑定，使表单input绑定message信息，从而绑定到Vue实例中的

组件化应用构建

 1 <div id="app-7">  2 <ol>  3 <!--  4  现在我们为每个 todo-item 提供 todo 对象  5  todo 对象是变量，即其内容可以是动态的。  6  我们也需要为每个组件提供一个“key”  8 -->  9 <todo-item 10 v-for="item in groceryList" 11  v-bind:todo="item" 12  v-bind:key="item.id"> 13 </todo-item> 14 </ol> 15 </div> 16 Vue.component('todo-item', { 17  props: ['todo'], 18 template: '<li>{{ todo.text }}</li>' 19 }) 20 21 var app7 = new Vue({ 22  el: '#app-7', 23  data: { 24  groceryList: [ 25  { id: 0, text: '蔬菜' }, 26  { id: 1, text: '奶酪' }, 27  { id: 2, text: '随便其它什么人吃的东西' } 28  ] 29  } 30 })

通过定义<todo-item></todo-item>自定义组件在Vue.component中对组件进行属性的添加，以及解释组件的作用

猜你喜欢