一 vue 介绍
vue 类似于高级的模版引擎
vue 的核心思想就是: 数据驱动视图 MVVM
- <div id="app">
- {{ message }}
- </div>
- var app = new Vue({
- el: #app,
- data: {
- message: Hello Vue!
- }
- })
每一个 vue 程序都是以 new Vue() 开始的
每一项 vue 实例都接收一个选项对象来配置 vue 应用
选项的 el 属性用来高数 vue 的启动入口节点
入口节点中所有的节点就可以使用 vue 的语法了, 从某种意义上, vue 就是一种高级的模版引擎
入口 id 不能挂载到 html,body 元素, 只能是一个普通的元素, 所以一般我们的页面一开始就来一个 div#app
vue 的模版对象数据通过 data 选项来指定
以前我们使用
template(tpl,{f00: bar <%=foo %>}, 或者 {{ foo }})
创建 vue 程序之后可以通过返回值拿到我们的 vue 实例, 我们可以通过 vue 实例直接访问 data 中的成员
data 中的数据是响应式的
data 中数据发生改变, 则所有绑定了 data 数据的 DOM 都会发生改变, 这就是所谓的 "数据驱动视图" 模式 mvvm
我们可以通过实例选项的 methods 来配置实例方法
我们建议把数据放到 data 中
把方法放到 methods 选项中
在方法中我们可以通过 this 来访问 Vue 实例
vue 操作自增示例
- <!--
- el: #app 这里节点是被 Vue 管理的模板
- -->
- <div id="app">
- <h1>{{ num }}</h1>
- <h2>{{ num }}</h2>
- <p>{{ num + 1 }}</p>
- <ul>
- <li>{{ num }}</li>
- </ul>
- <!-- 事件注册, 绑定了 data 中的 increment 方法 -->
- <button v-on:click="increment"> 点我让 num+1</button>
- </div>
- var app = new Vue({
- el: #app,
- data: { // 模板数据对象, 在模板中可以直接使用
- foo: bar,
- num: 10
- },
- methods: {
- increment: function () {
- // 我们利用数据驱动视图的方式, 改数据, 从而改 DOM
- // 不建议直接使用实例的名称, 因为一旦实例名称发生改变, 这里都得修改
- // app.num++
- this.num++
- }
- }
- })
二数据绑定
属性绑定
- <h1>{{ message }}</h1>
- <!-- {{}} 不能用于属性绑定 -->
- <!-- 属性绑定使用 v-bind: 属性名 ="数据成员" -->
1.v-model 双向绑定 v-bind 单向绑定 v-if 指令
指令名称: v-model
语法: v-model="绑定的成员" 所谓的双向绑定只是针对表单控件的例如: 文本框单选框复选框数据的改变会影响这个表单控件表单控件的改变会影响数据
使用场景
带有 value 的 input 都可以使用双向绑定
复选框使用双向绑定
- +
- <input type="checkbox" v-model="checkboxValue">
复选框双向绑定需要给一个布尔值, 布尔值为真的时候, 复选框被占用, 布尔值为假的时候, 复选框取消选中当数据发生变化的时候会影响 checkbox, 当 checkbox 发生变化的时候会影响数据
v-bind 单向绑定
v-bind 是单向的, 只能被数据影响, 但是不会影响数据
v-if 指令
给一个 Boolean 值, 该指令会根据布尔值的真假来显示和隐藏
<div id="box" v-if="seen"></div>
todo-list 案例
- <style>
- .done { text-decoration: line-through; color: #ccc; }
- </style>
- </head>
- <body>
- <div id="app">
- <h1>
- Todo
- </h1>
- <!-- {{ }} 中也可以调用方法, 将方法的返回值渲染到这里 -->
- <p>
- {{ calculate() }} of {{ array.length }} remaining
- <a href="#" v-on:click="clearAll">
- archive
- </a>
- </p>
- <ul>
- <li v-for="item in array">
- <!-- 因为 checkbox 是双向绑定, 所以当 checkbox 发生变化的时候就把改变同步到数据中了 也就是 item.done 会随着
- checkbox 的改变而改变 -->
- <input type="checkbox" v-model="item.done">
- <!-- class 比较特殊 如果是动态的 class 我们也是使用 v-bind 来绑定 但是我们需要给 class 一个对象 对象的
- key 是类名, 值是一个布尔值 当布尔值为真的时候, 则作用这个类名 反之去除这个类名 同样的, 也是响应式的, 当数据发生改变的时候, class
- 绑定也会受影响 -->
- <span v-bind:class="{ done: item.done }">
- {{ item.title }}
- </span>
- </li>
- </ul>
- <input type="text" placeholder="add new todo here" v-model="inputText">
- <button v-on:click="addArray">
- add
- </button>
- </div>
- <script src="node_modules/vue/dist/vue.js">
- </script>
- <script>
- var array = [{
title: 吃饭,
- done: true
- },
- {
title: 睡觉,
- done: false
- },
- {
title: 写代码,
- done: false
- },
- {
title: 吃饭,
- done: true
- }]
- var app = new Vue({
- el: #app,
- data: {
- array,
- inputText: ,
- },
- methods: {
- addArray: function() {
- this.array.push({
- title: this.inputText,
- done: false
- }) this.inputText = // 清空文本框
- },
- clearAll: function() {
- // 找到所有为 done:true 的元素从数组中删除
- var newArry = this.array.filter(function(item) {
- return ! item.done
- }) this.array = newArry
- },
- // 计算剩余为执行的个数 返回 done:fase 的数组的 lenght
- calculate: function() {
- return this.array.filter(function(item) {
- return ! item.done
- }).length
- }
- }
- })
- </script>
实例完
来源: http://www.bubuko.com/infodetail-2546275.html