标签：实例 code ext back scroll element 文本 src 表示
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
1 <div id="app"> 2 {{ message }} 3 </div> 4 5 var app = new Vue({ 6 el: ‘#app‘, //element需要获取的元素 7 data: { 8 message: ‘Hello Vue!‘ 9 } 10 })
除了文本插值，我们还可以像这样来绑定元素特性：
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 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。
在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
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-for 指令可以绑定数组的数据来渲染一个项目列表：
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 })
在控制台里，输入 app4.todos.push({ text: ‘新项目‘ })，你会发现列表最后添加了一个新项目。
我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
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 })
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
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 })
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：
1 // 定义名为 todo-item 的新组件 2 Vue.component(‘todo-item‘, { 3 template: ‘<li>这是个待办项</li>‘ 4 }) 5 6 //现在你可以用它构建另一个组件模板： 7 <ol> 8 <!-- 创建一个 todo-item 组件的实例 --> 9 <todo-item></todo-item> 10 </ol>
但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。
1 Vue.component(‘todo-item‘, { 2 // todo-item 组件现在接受一个 3 // "prop"，类似于一个自定义特性。 4 // 这个 prop 名为 todo。 5 props: [‘todo‘], 6 template: ‘<li>{{ todo.text }}</li>‘ 7 }) 8 9 <div id="app-7"> 10 <ol> 11 <!-- 12 现在我们为每个 todo-item 提供 todo 对象 13 todo 对象是变量，即其内容可以是动态的。 14 我们也需要为每个组件提供一个“key”，稍后再 15 作详细解释。 16 --> 17 <todo-item 18 v-for="item in groceryList" 19 v-bind:todo="item" 20 v-bind:key="item.id" 21 ></todo-item> 22 </ol> 23 </div> 24 25 Vue.component(‘todo-item‘, { 26 props: [‘todo‘], 27 template: ‘<li>{{ todo.text }}</li>‘ 28 }) 29 30 var app7 = new Vue({ 31 el: ‘#app-7‘, 32 data: { 33 groceryList: [ 34 { id: 0, text: ‘蔬菜‘ }, 35 { id: 1, text: ‘奶酪‘ }, 36 { id: 2, text: ‘随便其它什么人吃的东西‘ } 37 ] 38 } 39 })
子单元通过 prop 接口与父单元进行了良好的解耦。
在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。
1 <div id="app"> 2 <app-nav></app-nav> 3 <app-view> 4 <app-sidebar></app-sidebar> 5 <app-content></app-content> 6 </app-view> 7 </div>
标签：实例 code ext back scroll element 文本 src 表示
原文地址：https://www.cnblogs.com/ustc-anmin/p/10556101.html
