您的位置：首页 > 产品设计 > UI/UE

Vue:实践学习笔记(1)

2018-02-03 16:23 411 查看

Vue:实践学习笔记(1)

Vue基础知识

1.引入Vue

2.申明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

文本插值方式

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

绑定元素特性

1 <script src="https://unpkg.com/vue"></script>
2
3 <div id="app">
4   <span v-bind:title="content">你好</span>
5 </div>
6
7 <script>
8 var app = new Vue({
9  el:'#app',
10  data:{
11      content:'你好Vue！'
12  }
13 })
14
15 </script>

3.条件与循环

vi-if指令：控制元素的显示或隐藏

1 <div id='show'>
2    <span v-if="seen">wwwwww</span>
3 </div>
4
5 var app1 = new Vue({
6     el:'#show',
7   data:{
8   seen:false
9   }
10 })

v-for指令：绑定数组的数据来渲染一个项目列表

1 <div id="list">
2   <ul>
3     <li v-for="todo in todos">
4       {{ todo.text}}
5     </li>
6   </ul>
7 </div>
8
9 <script>
10 var list = new Vue({
11     el:'#list',
12   data:{
13       todos:[{text:"hello"},{text:"what"}]
14   }
15 })
16 </script>

4.v-on:事件监听

1 <div id='show'>
2    <button v-on:click="alert">
3    {{content}}
4    </button>
5 </div>
6
7 <script>
8 var app1 = new Vue({
9     el:'#show',
10   data:{
11       seen:false,
12     content:"Hello"
13   },
14   methods:{
15       alert:function()
16     {
17         this.content = '我被点击了'
18     }
19   }
20 })
21 </script>

说明：

　　点击按钮后，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

5.V-model：表单与应用程序之间双向绑定

1 <div id='show'>
2    <button v-on:click="alert">
3    {{content}}
4    </button>
5    <input v-model="content">
6 </div>

说明：

　　输入框内容的改变，将直接影响content的值。

6.组件化应用程序构建

1.创建一个模板

var myComponent = Vue.extend({
props:["todo"],
template: "<a class='weui-cell weui-cell_access' href='javascript:;'>
<div class='weui-cell__bd'><p>{{todo.text}}</p></div><div class='weui-cell__ft'></div></a>"
});

2.注册模板

　　Vue.component('todo-item',myComponent);

3.使用组件

var app = new Vue({
el:"#cell-list",
data:{items:[{id:1,text:"hello"},{id:2,text:"bob"},{id:3,text:"Tom"}]}
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航