框架和库
框架：Vue，react，angular等，是一整套的东西，就是我们拿过来往里面填自己想实现的功能代码等。拥有完整的解决方案
库：jQuery，Zepto等，相当于一个工具集合，可供开发人员调用使用里面的工具方法。
渐进式：
- vue全家桶 vue.js + vue-router + vuex + axios
- 通过组合完成一个完整的框架
声明式渲染(无需关心如何实现)
组件系统
客户端路由(vue-router)
大规模状态管理(vuex)
构建工具(vue-cli)MVC：单向
model 数据
view 视图
controller 控制
MVVM：双向
view 视图
model 数据
viewModel 视图模型vue不兼容，因为使用了
Object.defineProperty(IE5)来进行数据劫持
vue安装
npm(node package manager)全局安装淘宝镜像
npm install cnpm -g --registry=http://registry.npm.taobao.org
cnpm init初始化，会产生一个package.json文件，用来描述项目依赖
cnpm install vue
或者在package.json文件中直接添加vue依赖，然后再cnpm install即可
将数据显示在页面上，数据改变，视图就会相应改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- moustache 小胡子语法 表达式 赋值 取值 三元 -->
{{msg}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// 引入vue后会给一个Vue构造函数
let vm = new Vue({ // vm 即viewModel
el: '#app', // 告诉vue管理的是哪一个DOM querySelector
data: { // data中的数据会被vm代理
msg: 'HelloWorld' // 可以通过vm.msg获取到相应内容
}
}); // Object.defineProperty
</script>
</body>
</html>
vue指令
directive 只是dom上的行间属性 一定的意义实现特殊功能，所有指令都以v-开头，有自定义和vue自带的两种
v-model：在表单控件或者组件上创建双向绑定，是一个语法糖，在用户输入事件中更新数据，以及处理一些特殊例子
表单元素： input checkbox textarea radio select
checkbox：只有一个值的时候，会默认转化为布尔类型
<input type="checkbox" v-model="a">其中a的值为1就选中，0就不选中
多个选项的时候要填value属性，并且绑定元素要是一个数组类型，选中一个，vue就会自动把当前的value值存入数组
select：value属性不写默认取的是option中的值，请选择这一项要加disabled让他不能操作
select是多选框，数据类型也要是数组，数组中存的是当前选择项的索引
radio：是通过v-model进行分组的，value值对应的就是选择后的结果
视图改变影响数据，当输入框的值改变时，vm.msg获取到的值也会改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="app" v-cloak="">
<!-- moustache 小胡子语法 表达式 赋值 取值 三元 -->
{{msg}}
<input type="checkbox" v-model="a">
<br>
爱好：<input type="checkbox" v-model="b" value="睡觉">睡觉
<input type="checkbox" v-model="b" value="吃饭">吃饭
<input type="checkbox" v-model="b" value="学习">学习
<input type="checkbox" v-model="b" value="逛街">逛街
{{b}}
<br>
<select v-model="c" multiple>
<option value="" disabled>请选择</option>
<option value="1">你猜</option>
<option value="2">我猜</option>
<option value="3">不猜</option>
</select>
{{c}}
<br>
radio必须有一个value，否则默认两个都选的，因为两个值是一样的，没法区分
<input type="radio" v-model="gender" value="男">男
<input type="radio" v-model="gender" value="女">女
{{gender}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// 引入vue后会给一个Vue构造函数
let vm = new Vue({ // vm 即viewModel
el: '#app', // 告诉vue管理的是哪一个DOM querySelector
data: { // data中的数据会被vm代理
msg: 'HelloWorld', // 可以通过vm.msg获取到相应内容
a: 1,
b: [],
c: [],
gender: ''
}
}); // Object.defineProperty
</script>
</body>
</html>
Object.defineProperty()
自己实现双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="input">
<script>
let obj = {},
temp = {};
Object.defineProperty(obj, 'name', {
// configurable: false, // 是否可配置
// writable: false, // 是否可写
// enumerable: false, // 是否可枚举
// value: 1,
get : function () { // 获取obj的name属性会触发
// return 1;
return temp['name'];
},
set : function (value) { // 给obj.name设置值会触发get方法
// console.log(value);
// obj.name = value; // 会形成死循环
temp['name'] = value;
input.value = value; // 改变输入框的内容
}
});
// 页面加载时调用get方法
input.value = obj.name;
// 输入框值发生变化 调用set方法
input.addEventListener('input', function(){
obj.name = this.value;
});
</script>
</body>
</html>
vue常用指令
v-text：将数据插入到页面中，可以防止{{}}出现在页面上
<div v-text="msg"></div>
<!-- 和下面的一样 -->
<div>{{msg}}</div>
v-once：只渲染一次，当数据再次变化时，页面不刷新
<div v-once>{{msg}}</div>
v-html：把html字符当做html渲染
<div v-html="p"></div>
v-cloak：解决块级闪烁问题，保持在元素上直到关联实例结束编译，使用时要加样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="app" v-cloak="">
</div>
v-for：循环数组，对象，字符串，数字 会复用原有的结构
<div v-for="value in/of 数组"></div>
<div v-for="(value, index) in/of 数组"></div>
<div id="app">
<ul>
<li v-for="(fruit, index) in fruits">
{{index+1}}.{{fruit.name}}
<ul>
<li v-for="(color, cIndex) in fruit.color">
{{index+1}}.{{cIndex+1}}:{{color}}
</li>
</ul>
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
fruits: [
{name: '西瓜', color: ['green', 'pink', 'red']},
{name: '苹果', color: ['green', 'red']},
{name: '香蕉', color: ['yellow']}
]
}
}); // Object.defineProperty
</script>
v-on：绑定事件简写@，给DOM绑定事件，函数需要定义在methods中，不能和data里的内容重名，this指向的是实例，不能使用箭头函数，事件源对象如果不写括号，可以自动传入，手动写的话要传入$event
methods和data中的数据和方法会全部放到vm上，名字不能冲突，this都是指向实例
<div @事件名="fn">
v-bind：动态绑定数据 可简写为:的形式
<img :src="product.productCover" :title="product.productName">
数据是
对象类型时
一、使用变量时要先初始化，否则新加的属性不会导致页面刷新，没有getter,setter方法
二、vm.$set()方法 可以给对象添加响应式的属性
三、替换原对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{msg.school}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// vue会循环data中的数据(数据劫持)，依次增加getter,setter方法
let vm = new Vue({
el: '#app',
data: {
// msg: {school:''} // 方案一 初始化
// msg: {} // 方案二 vm.$set(vm.msg, 'school', 1);
msg: {} // 方案三 替换原对象
}
});
// vm.$set(vm.msg, 'school', 1);
vm.msg = {school: 'js', age: 1} // 替换原对象
</script>
</body>
</html>
数据是
数组类型时
改变数组中的某一项没有效果 ，改变数组长度也不行，只有一些变异方法vue做了监听
pop push shift unshift sort reserve splice这些方法都可以改变原数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{arr}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
arr: [1,2,3,4,5]
}
});
vm.arr.reverse(); // [ 5, 4, 3, 2, 1 ]
vm.arr = vm.arr.map(item=>item*3); //[ 3, 6, 9, 12, 15 ]
// vm.arr[0] = 100;
// vm.arr.length --;
</script>
</body>
</html>
网友评论