首页 > 其他 > 详细

vue学习总结(简单介绍)

时间:2019-03-19 00:37:02      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:数据   hello   temp   组件化   绑定   key   bubuko   程序   条件与循环   

声明式渲染

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>

 

vue学习总结(简单介绍)

标签:数据   hello   temp   组件化   绑定   key   bubuko   程序   条件与循环   

原文:https://www.cnblogs.com/ustc-anmin/p/10556101.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号