20170926day01
一.Vue的简单概述
什么是框架？
框架指的是一套非常优秀可被反复使用的代码，帮助开发者解决一些复杂的问题
框架的好处？
提高了代码的复用率
降低模块之间的耦合度
提高开发速度
提高代码质量
Vue是什么？
它是一个实现UI层的渐进式js框架，所谓的渐进式就是你可以一步一步的，有阶段性的来使用Vue。在Vue.js的设计上采用MVVM(Modol-View-ViewModel)模式。
为什么学习Vue?
非常好的中文文档
学习曲线比较缓和（容易上手）
速度快
体积小
基于组件化（web component）的开发方式
代码的可读性、可维护性比较好
如何使用Vue？
搭建环境有两种方式：
方式1：CLI（command line interface 命令行窗口）
#安装nodejs
https://nodejs.org/en/
#全局安装 vue-cli
npm install --global vue-cli
#创建一个基于 webpack 模板的新项目
vue init webpack my-project
#安装依赖，走你
cd my-project
npm install
npm run dev
方式2：直接引入对应的js文件
二.Vue的基础使用
数据绑定
通过new的方式来得到了Vue的实例，在new通过一个对象来对Vue的实例配置（el，data)；el指的是页面中已经存在的DOM元素，可以写选择器。
接触了双花括号(mustache/interpolation)的语法:可以读取变量的值 显示在调用的元素的innerHTML中
这是一个简单例子
{{msg}}
{{car.brand}}
{{3+5}}
{{count>totalNum?'数据超过限制了':'正常'}}
{{!hasMore}}
三.Vue的常用指令
1.循环指令
1.
-
{{item}}
//js文件中
export default {
data() {
return {
myList:[100,200,300,400,500],
};
},
};
2.
-
{{value}}-{{index}}
//js文件中
export default {
data() {
return {
myList:[100,200,300,400,500],
};
},
};
3.除数组外，对象属性也是可以遍历的（循环渲染学生列表示例）
姓名
性别
年龄
{{value}}
export default {
data() {
return {
stuList: [{
name: 'michael',
sex: 1,
age: 20
},
{
name: 'miller',
sex: 1,
age: 21
},
{
name: 'lincoln',
sex: 0,
age: 23
},
{
name: 'lucy',
sex: 1,
age: 22
},
{
name: 'hanmeimei',
sex: 0,
age: 19
}
]
};
},
};
4.也可以迭代整数
-
{{n}}
2.条件渲染
v-if
v-show="表达式" 根据表达式执行的结果的真假 来切换display显示还是隐藏
{{msg}}
仅会员可见
A
B
C
D
export default {
data() {
return {
msg: 'Hello Vue',
isMember: true,
answer: 'c'
};
},
};
v-show
v-show="表达式" 根据表达式执行的结果的真假 来切换display显示还是隐藏
{{msg}}
当status为1时显示
export default {
data() {
return {
status:1
};
},
};
v-show与v-if的用法基本一致，只是v-show是改变css属性display来控制元素显示的，v-if会根据表达式来适当的销毁和重建组件或事件。总之，v-if适合条件不经常改变的场景，因为它的切换开销比较大，v-show适用于频繁切换的条件。
数组更新
vue的核心是数据与视图双向绑定，修改数组时，vue会检测数据变化，vue包含一组观察数组变异的方法，使用它们会触发视图更新。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()从这以上是会改变原数组的
filter()
concat()
slice()从这以上返回新数组但是可替换原来的数组
姓名
性别
年龄
{{tmp.name}}
{{tmp.sex}}
{{tmp.age}}
export default {
data() {
return {
stuList: [{
name: 'michael',
sex: 1,
age: 20
},
{
name: 'miller',
sex: 1,
age: 21
},
{
name: 'lincoln',
sex: 0,
age: 23
}
]
};
},
};
但是！下列变动的数组中vue无法检测也不会促发视图的更新
1.通过索引直接设置项目，比如this.stuList[3]={...}
解决办法两种
第一种：this.$set(this.stuList,3,{name:'xiaoni',sex:0,age:23});
第二种：this.stuList.splice(3,1,{name:'xiaoni',sex:0,age:23});
2.修改数组长度，比如this.stuList.length=1;
解决办法：this.stuList.splice(1);
Vue事件绑定
{{msg}}
export default {
data() {
return {
msg: 'Hello Vue',
};
},
methods: {
handleClick: function () {
console.log('btn is clicked');
},
click(data,event){
console.log(data);
},
handleChange: function (event) {
//方法会默认将原生事件对象event传入
console.log('选择了某个选项: ' + event.target.value);
},
handleSubmit: function () {
console.log('提交事件被触发了');
}
}
};
Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符
.stop
.prevent
.capture
.self
.once
.passive
...
...
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
全部的按键别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
其他常用指令
1.v-bind将变量中的值 通过 v-bind 绑定到元素指定的属性,简写是：
{{msg}}
![]()
baidu
baidu
背景色会被修改
我的字体颜色会变化
没有跟多数据可以加载了
it is a test
export default {
data() {
return {
msg: 'Hello Vue',
imgUrl: '1.jpg',
myLink: 'http://www.baidu.com',
myBGColor: '#ff0000',
isRed: false,
isValid: false,
hasMore: true,
myHtml: 'it is a header
'
};
},
methods: {
modifyBGColor: function () {
this.myBGColor = '#0000ff'
}
}
};
v-text
v-text='变量' 根据变量更新对应的文本内容
v-html
v-html="变量" 根据变量更新对应的innerHTML
Vue中的v-model
v-model指令本身就是一个双向数据绑定的指令：既可以将数据绑定到视图，又可以将视图中的结果绑定到数据。
{{msg}}
{{"用户输入的结果为"+userAddress}}
{{myNotes.length}}
export default {
data() {
return {
msg: 'Hello Vue',
userAddress: '北京万寿路',
num1: 0,
num2: 0,
myNotes: ''
};
},
methods: {
modifyMsg: function () {
this.msg = 'Hello Data Binding';
},
addSum: function () {
console.log(this.num1 + this.num2);
}
}
};
v-model的修饰符，用于控制数据同步的时机：
.lazy在输入框中，v-modal默认是在input事件中同步输入框的数据(除了中文输入法)，使用.lazy会转变为在change事件中同步，msg的信息不会实时改变，而是在失焦或者按回车时才会更新，示例代码如下：
{{msg}}
.number可以将输入转换为Number类型
{{msg}}
.trim 自动过滤输入的首位空格
{{msg}}