初识Vue
2015 年 5 月 13 日
1. 什么是Vue?
Vue是前端框架,可以独立完成前后端分离式web项目的JavaScript框架
2. Vue特点
Vue是三大主流框架之一(Angular, Reactm, Vue), Vue结合了前两者的优点,是一个轻量级,中文api,数据驱动(数据驱动,不是从DOM出发),双向绑定(数据具有监听机制),MVVM设计模式,组件化开发,单页面(单页面能够体现出高效)应用的特点.
3. Vue的使用方法
1.下载vue.js：https://vuejs.org/js/vue.js 2. 通过下载保存在本地,在HTML文件中引入 3. 在HTML中书写挂载点,用id表示(一个Vue对象挂载点之后索引一个匹配结果,挂载点一般用id标识) 4. 在自定义的script的标签中new一个对象,传一个大字典过来 5. 字典中用el与HTML挂载点页面结构建立关联,data为其通过数据,methods为其提供方法
4. 实例成员挂载点
Title
{{user}}
new Vue({
el: '#c1', // el表示挂载点
})
5. 实例成员—-数据
1. data给变量提供数据,用{}表示
2. 在插值表达式中直接书写数据的key来访问数据
Title
{{user}}
{{dic}}
new Vue({
el: '#c1', // 挂载点
data:{ // 给各变量提供数据, 变量名: 变量的值
'user': 'panshao',
dic:{
'username': 'panshao',
'age': '18'
}
}
methods:{
} // 为挂载点提供事件方法, 函数名 : function(){}
})
6. 实例成员–过滤器
1. 过滤器本身数据就是数据处理函数.可以将插值表达式中的数据作为参数进行处理, 得到的函数返回值就是处理后的结果
2. 过滤器使用语法{{ 变量|过滤器(变量)}}
3. 过滤器在实例中用filters成员提供
Title
{{100| f1}}
<!--{{10, 20, 30, 40 | f2}}-->
{{10, 20 | f2(30, 40)}}
{{140 | f2}}
new Vue({
el: '#app',
filters:{
// f1 : function (num) {
// return num**2
// },
// 总结: {{d1, d2, d3, d4 | f2}} 或者 {{d1, d2, d3, |f2(d4)}} 或者{{d1, d2 |f2(d3, d4)}}或者{{d1|f2(d2, d3, d4}}
f2 : function (d1, d2, d3 ,d4) {
// console.log(d1, d2, d3, d4);
return d1 + d2 + d3 + d4
}
}
})
当为{{d1 | f2}}时,返回的是NaN
7. 文本指令
Title
如果v-text="常量"的话, 常量可以是数字,或者是bool值,这是不需要data提供数据值
// 可以解析HTML语法
// 相当于字符串的拼接, 后续会常常遇到
let app = new Vue({
el: '#app',
// data:{
// info: '哈哈哈',
// }
})
平时在程序中遇到多行字符串时,如果觉得引号不够用,这时就可以用反引号, 他的按键在esc下面,具体用法如下:
反引号字符串中可以直接填充变量,语法为`${变量名}`
let name = 'panshao'
let hobby = 'dbj'
let s2 = `name: ${name}
hobby: ${hobby}`;
console.log(s2)
8. 事件指令
语法 : v-on: 事件名="函数名"
简写: @事件名="函数名"
在methods中写函数名与对应实现体的逻辑
事件传参: 函数名| 函数名()|函数名(自定义函数)| 函数名($event, 自定义参数)
当我们想要某个数字实现自减时(点击一次,数字减一), 具体代码如下:
这个是low b版本的
Title
<!---->
.low {
cursor: pointer;
}
{{num}}
双击
悬浮
// 加括号不是在调用,而是在传参
悬浮1 // 传一个参数
悬浮2
悬浮3
let app = new Vue({
el: '#app',
data: {
num : 99,
},
methods:{
lowNum: function (num) {
this.num -= 1
},
// ev 是个事件对象, 在触发事件时候没有传参给函数体,而系统会自动的传参给前端,他是一个事件对象,判断是鼠标单击,还是双击,亦或是键盘点击的,点击在哪
dblAction: function (ev) {
console.log(ev)
},
overAction(a, b, c){
console.log(a,b ,c)
}
}
})
一旦加括号系统就不会帮我们传事件对象,那如果想要传事件对象,就得去明文书写,我们都知道,在方法里面body内在外部script中,想用Vue的数据成员时,我们就会这样表示: app.$data, 如果想在方法中使用那就要这样表示: this.$data,在插值表达式下面可以表示为{{$data.num}},省略了app,为什么会省略app, 原因就是我们在与前端交互时就已经挂载点存在.
总结: 事件传参
@事件 = '方法' 默认传入事件对象 $event @事件 = '方法()' 不传递任何参数 @事件 = '方法(参数...)' 只传递自定义参数 @事件 = '方法($event, 参数...)' 自定义传参时会传递事件对象
9 属性指令
语法: v-bind: 属性名="变量值"
v-bind: 属性名 = "变量值" 可以简写:属性名 = "变量值"
单值属性绑定: :title="变量值" | :id = "变量值" | :自定义属性 = "变量值"
style属性绑定: : style = "字典变量" | :style = "{css属性1:变量1, ... , css属性n: 变量n}"
class属性绑定: : class= "变量值" | :class="[变量1, ... , 变量n]" | class="{类名: 布尔变量}"
属性指令
[index] {
color: orange;
}
.ccc {
background-color: yellowgreen;
color: greenyellow;
border-radius: 50%;
}
.ccc1 {
background-color: yellowgreen;
}
.ccc2 {
color: greenyellow;
}
.ccc3 {
border-radius: 50%;
}
.ttt {
background-color: gold;
color: orange;
}
属性指令1
属性指令2
自定义属性也可以被vue绑定1
自定义属性也可以被vue绑定2
悬浮文本提示
样式绑定1
样式绑定2
样式绑定3
样式绑定4
样式绑定5 yyy为布尔值
点击切换类
new Vue({
el: '#app',
data: {
p1: 'q1',
myStyle: {
backgroundColor: 'pink',
color: 'deeppink',
'border-radius': '50%'
},
c1: 'cyan',
c2: 'tan',
myc1: 'ccc',
myc2: 'ccc1',
myc3: 'ccc2',
myc4: 'ccc3',
yyy: true, // false
},
methods: {
clickAction() {
this.yyy = !this.yyy; // 如果yyy等于false,那么等于号右边的this.yyy就是false,这个方法只操作变量,变量只需与ttt进行绑定
}
}
})
10 表单指令
1) 语法：v-model="控制vaule值的变量"
2) :value="变量" 直接绑定数据不会时时更新(修改表单标签值，值不会时时映射给绑定的变量)
3) v-model="变量" 绑定数据会时时更新(修改表单标签值，值会时时映射给绑定的变量)
4) 单独复选框作为确认框时，v-model绑定的变量为布尔类型变量
5) 多复选框，v-model绑定的变量值是一个列表(数组)，存放复选框选项值(谁被选中就存放了谁)
6) 单选框，v-model绑定的变量值是某一个选项的值(值是哪个选项的值，那个选项就被选中)
```
```html
About The Author
