Vue
- 引入Vue.js，官网找到开发版，另存一个js文件，在项目中引用
- 基本语法
# js 代码
var app = new Vue({
el: '#app', 对应的元素名称
data: {
name: 'hello Vue.js',
} # 传入的数据
});
# html 代码
<div id="app">
{{ name }} <!-- 使用{{}}来渲染data中的变量 -->
</div>
- 指令
v-model：用于input框，可以将input框的值绑定到对应的data数据中，修改input框的内容，对应的data的值会跟着变化- 在标签中使用指令时，变量的使用可以直接用，不用写{{}}来渲染
v-for:循环一个变量，用法如下<li v-for="todo in todos"> {{ todo.text }} </li>v-bind：该指令可以对元素属性值进行绑定,该指令可以简写，直接写:v-on：绑定事件,可以简写为@，同样使用
Vue官方教程
- 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
# .js
var vm = new Vue({
//参数
})
Vue的生命周期图如下：
Vue的模板语法：{{ var }}
- 该语法适用于文本中，无法应用于html标签的属性中；并且该值是双向绑定的，该值与Vue应用的data中相对应的值绑定
v-bind指令:v-bind
- 绑定相关值到attr中
指令
指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
#参数：一些指令后可以接受参数，在指令之后用：表示
这里的参数是href,实现了动态绑定a标签的href属性的值
<a v-bind:href="url">...</a>
#修饰符:
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
<form v-on:submit.prevent="onSubmit">...</form>
#计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: { //computed参数内的就是计算属性
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
- 计算属性能做的这里也能用methods参数的方法去实现，两者的区别在于，计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值。 也就是说我们在console中不刷新页面反复访问一个计算属性时，只要其依赖未发生改变，计算属性就不会变，同时计算属性存在缓存中，可以提高效率，方法则不同，每次渲染都会重新调用。
- 计算属性一般来说只有getter方法，只能读取不能赋值，但可以为其提供
#计算属性的setter
- 在computed参数的每个计算属性中设置set参数即可
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
#侦听器
Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
//...
watch:{
message:function(newval,oldval){
....//此处接收两个参数，一个是变化后的值一个是变化前的值
}
}
#Html的class属性以及style内联样式的绑定
- class与style同为html的属性所以也是使用
v-bind来绑定在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强
- 绑定HTML Class
- 对象语法(只要最后放到这里的是一个js对象就行)
-
使
v-bind:class的值为一个对象，这里表示class属性若isActive属性为true则该属性为active,该属性的class可以与普通的class值共存<div v-bind:class="{ active: isActive }"></div> <div class="static" v-bind:class="{ active: isActive }"></div> -
传入的对象中可以有多个值，写法不同，从第二个开始key需要打引号
<div class="static" v-bind:class="{ active: isActive,'text-danger': hasError }"></div> -
也可以直接在Vue对象的data属性中创建一个js对象，直接在v-bind:中使用这个对象
# html <p :class="Classobj">TEST</p> # main.js var vm = new Vue({ el: "#app", data: { isActive: true, Classobj: { disable: true, readonly: true } } }) -
也可以在计算属性中返回一个js对象
-
- 数组语法
-
同上传入一个js数组,其渲染效果就是将每一个数组元素对应的值渲染上去
# html <div id="app2"> <p :class="[activeClass,staticClass]"> 数组语法 </p> </div> # js var vm = new Vue({ el: "#app2", data: { activeClass: 'active', staticClass: 'static', } }) -
有一种用法就是使用三元运算符做判断
<p :class="[istrue ? activeClass:'']"> 数组语法 </p>
-
- 对象语法(只要最后放到这里的是一个js对象就行)
- 绑定内联样式
- 对象语法(用法基本等同class的对象语法的绑定)
# js var vm = new Vue({ el: "#app3", data: { mystyle: { color: 'blue', fontSize: '50px', } } }) # html <div id="app3"> <p :style="mystyle">内联样式</p> </div> - 数组语法,需要传入的每一个元素为一个js对象，每个对象里key为内联样式名，value为样式的值
# html <p :style="[mystyle,mystyle2]">内联样式</p> # js var vm = new Vue({ el: "#app3", data: { mystyle: { color: 'blue', fontSize: '50px', }, mystyle2: { margin: '20px', } } })
- 对象语法(用法基本等同class的对象语法的绑定)
#条件判断
- if-else
# html
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
# js
var vm = new Vue({
el: '#app',
data: {
ok: true,
}
})
上述代码存在一个问题就是我们的if-else只应用于单独的一个元素标签，如果我们需要在判断中包含很多的元素时需要使用别的方式
- 在 元素上使用 v-if 条件渲染分组
# html <template v-if="ok"> <h1>1</h1> <h2>2</h2> <h3>3</h3> </template> <template v-else> <h4>4</h4> <h5>5</h5> <h6>6</h6> </template> - else-if
# html
<div id="app2">
<div v-if="type == 'A'">
A
</div>
<div v-else-if="type == 'B'">
B
</div>
<div v-else-if="type == 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
# js
var vm = new Vue({
el: '#app2',
data: {
type: 'A',
}
})
- v-show：用于控制元素的展示，元素Dom实际存在只是不被显示出来
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
#列表渲染
- v-for用法：循环遍历js数组、对象、数字,可以接收两个参数在遍历时以便获取到索引号
- v-for 同 v-if 可用template属性循环遍历一系列元素
- 遍历数组
# html
<div id="app4">
<p>{{ items }}</p>
<p v-for="item in items">
{{ item }}
</p>
<hr>
<p v-for="(item,index) in items">
{{index}}--{{item}}
</p>
</div>
# js
var vm4 = new Vue({
el: "#app4",
data: {
items: [
'a','b','c','d'
]
}
})
- 遍历对象，就是遍历对象中的属性，遍历对象可获取3个参数分别是value，key，index
# html
<p v-for="(item,key,index) in myobject">
{{index}}:{{key}}-{{item}}
</p>
#js
var vm4 = new Vue({
el: "#app4",
data: {
myobject: {
firstname: 'john',
lastname: 'smith',
age: '28',
}
}
})
- 数组更新(下面这些方法产生的效果可以响应式的更新数组)
- 变异方法（变异方法能够改变原始数组）
push()数组结尾添加元素pop()数组结尾弹出元素shift()数组头部弹出元素unshift()splice()sort()reverse()
- 替换数组（返回一个新的数组，不改变原数组）
filter()concat()slice()
- Vue不能检测到直接为数组的索引赋新值的操作，以及修改数组长度；Vue提供了解决方案：
// Vue.set第一个的解决方法 Vue.set(vm.items, indexOfItem, newValue) // 第二个问题的解决 vm.items.splice(newLength) - 动态更新响应元素实例：
# js var vm4 = new Vue({ el: "#app4", data: { items: [ 'a', 'b', 'c', 'd' ], myobject: { firstname: 'john', lastname: 'smith', age: '28', } } }) # html Vue.set(vm4.myobject, 'addAttr', 'this is add.') // 动态添加响应元素 <div id="app4"> <p>{{ items }}</p> <p v-for="item in items"> {{ item }} </p> <hr> <p v-for="(item,index) in items"> {{index}}--{{item}} </p> <hr> <p v-for="(item,key,index) in myobject"> {{index}}:{{key}}-{{item}} </p> </div> - 动态为某个响应元素添加多个属性
// 为某一个响应对象添加多个新的属性值，做法如下 vm4.myobject = Object.assign({}, vm4.myobject, { age: 27, favoriteColor: 'Vue Green' })
- 变异方法（变异方法能够改变原始数组）
- 过滤排序数组：使用计算属性来取得过滤结果或者使用方法
-
使用计算属性
# html <div id="app5"> <ul> <li v-for="item in even">{{ item }}</li> </ul> </div> # js var vm5 = new Vue({ el: "#app5", data: { list: [1, 2, 3, 4, 5, 6, 7] }, computed: { even: function () { return this.list.filter(function (number) { return number % 2 === 0 }) } } }) -
使用方法
# html <div id="app6"> <ul> <li v-for="item in even(list)">{{ item }}</li> </ul> </div> # js var vm6 = new Vue({ el: "#app6", data: { list: [1, 2, 3, 4, 5, 6, 7] }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } } })
-
- 重复指定次数的循环
# html
// 重复10次
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
- 同v-if，v-for也可以在template中渲染多个标签
- v-for与v-if位于同一元素下时
- 当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用
# 每次循环都先if判断
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
事件处理 v-on
- 最简单示例
# html <div id="app1"> <button v-on:click="count+=1">add 1</button> <p>the count is : {{count}}</p> </div> # js var vm1 = new Vue({ el: "#app1", data: { count: 0 } }) - 调用一个Vue中的方法，而不是直接写js代码,调用方法时依情况写参数及括号
# js var vm2 = new Vue({ el: "#app2", data: { name: 'Vue.js is it ?' }, methods: { greet: function (event) { alert('Hello' + this.name) if (event) { alert(event.target.tagName) } } } }) # html <div id="app2"> <button v-on:click="greet">greet</button> </div> - 访问原始dom事件，可以用特殊变量
$event把它传入方法 - 事件修饰符
- 按键修饰符
- 系统修饰键
表单输入绑定 v-model
- 文本框input、textarea的 v-model 指明了该input元素的值跟哪一个Vue数据进行双向绑定
# html
<div id="app1">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
# js
var vm1 = new Vue({
el: "#app1",
data: {
message: ''
}
})
- 复选框,示例包括单复选框以及多复选框的绑定，其中注意多复选框的data是一个数组[]
# js
var vm3 = new Vue({
el: "#app3",
data: {
checkboxOne: '',
checkedNames: [],
}
})
# html
<div id="app3">
<input type="checkbox" id="checkbox1" v-model="checkboxOne">
<label for="checkbox1">{{ checkboxOne }}</label>
<br>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
- 单选框radio
# html
<div id="app4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
# js
var vm4 = new Vue({
el: "#app4",
data: {
picked: ''
}
})
- 下拉框select;如果是多选的下拉框，Vue的data需要为一个数组[]
# html <div id="app5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> <select v-model="selects" multiple > <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selects }}</span> </div> # js var vm5 = new Vue({ el: "#app5", data: { selected: '', selects:[] } })- 如果要动态生成option使用v-for
# html <select v-model="dyselect"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ dyselect }}</span> # js var vm5 = new Vue({ el: "#app5", data: { options: [{ text: 'one', value: '1' }, { text: 'two', value: '2', }, { text: 'three', value: '3' }], dyselect: '', } })
- 如果要动态生成option使用v-for
- 值绑定，可以自己静态的定义每个v-model绑定的值传到Vue中的值是什么，也可以动态的用v-model:value绑定这个值，并与Vue中的data动态关联
v-model的修饰符
- .lazy
- .number
- .trim
扫一扫
8489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
