Vue 简记
Vue 简记
MVVM模型
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
1.M: 模型(Model):对应data中的数据
2.V:视图(View):模型
3.VM:视图模型(ViewModel): Vue实例对象
回顾 Object.defineProperty()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let person = {
// 声明定义的对象属性:
//默认可以 : 枚举,删除,修改
name: "张三",
sex: "男"
};
// Object.defineProperty(对象, 属性 ,引用类型的配置项)
//添加(定义)属性 age
//这样添加的属性是不可枚举的,也就是无法通过增强for遍历到
Object.defineProperty(person, "age1", {
value: 18
})
// 遍历不到
console.log(Object.keys(person));
for (let key in person) {
console.log(key);
}
Object.defineProperty(person, "age2", {
value: 18,
enumerable:true, //控制属性是否可枚举 ,默认为false
writable:true, //控制属性是否可修改,默认为false
configurable: true //控制属性是否可以被删除
})
console.log(Object.keys(person));
/**********************简单的数据代理小demo*****************************************/
/******使用 变量 a 代理了 属性job********/
let a ="律师";
Object.defineProperty(person,"job",{
enumerable:true,
configurable:true,
// 使用getter后不能再指定属性为 riteable为true和指定value
get(){ //当读取属性时触发
//此时请注意,当每次获取job时都会从执行如下函数,也就是说即使执行了 person.job = "值",只要a没变,那么person.job也是不会变的
console.log("读取了job");
return a;
},
set(set_value){ //当修改属性时触发
console.log("修改了job,修改的值是:",set_value);
a = set_value;
}
});
</script>
</body>
</html>
vue中的数据代理与监测
<!--
Vue 数据代理:
在页面中{{name}} 实际上获取到的值,应该是 data(){
return {school:"广科师",major:"软件工程"};
}
原理: 在new 一个Vue实例时, 我们将构造器Vue({对象})中的参数对象称为
opintion , 其中参数对象的 data属性 会成为 vue实例的生成一个名为 _data的属性(此时依然没有
涉及到数据代理,属于赋值的关系),即实际上js整个作用域中真实存在的只有 _data属性(这个属性的类型是对象)
随后为了编码方便,vue实例又生成代理_data对象的属性值的属性
-->
示意图
模拟一个数据监测
let data = { //用这个模拟,Vue里我们配置的data
name :"Vue",
address :"神奈川"
};
// 创建一个代理对象
let obs = new Observe(data);
console.log(obs);
// 代理对象的构造方法
function Observe(obj){
// 拿到参数的 所有属性
let keys = Object.keys(obj);
keys.forEach((k)=>{ // k 是每次变量的临时值
/*
下面的意思是: 当读取或者修改Observer的实例的属性时,
将用参数 obj的属性值替换, 也就是将Observer实例与参数 obj双向绑定
*/
Object.defineProperty(this,k,{ //这里的 this 指向 Observer创建的实例对象
get(){
// 这里用方括号不用 . 是因为 k 是变量
return obj[k];
},
set(val){
obj[k] = val;
}
});
});
};
let vm = {};
vm._data = data = obs;
Vue2实例的属性添加问题
如果不借助api,在Vue2中, vue实例是不允许添加数据的
但是可借助Vue.set()方法在已有的数据对象(即这个对象必须是响应式的)中添加属性
Vue2监测数组问题
在vue监测的数据中,如果数据是数组,只有数组是通过调用如下方法改变才能被监测到,(vue底层对起进行了封装)
push()从尾部添加一个数据pop()从尾部移除一个数据shift()从头部移除一个数据unshift()从头部添加一个数据splice(int start,int count,data)替换数组中的数据, 参数start代表从哪个开始(第一个是0),count代表替换数据个数sort()升序排序reverse()反转
数据监测小总结:
列表渲染
循环列表的key原理(key使用id而不使用index)
Vue在修改dom时,会复用dom,所以在上面的例子中,vue根据 key对比,由于key是索引,导致复用了之前的文本框
故: 推荐使用唯一标识数据项的属性(如id)来绑定 key ,如渲染的列表仅作为展示不修改,则两者无所谓
列表过滤
(分别使用computed和watch实现)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="root">
<h3>列表过滤(watch实现)</h3>
模糊搜索:<input type="text" v-model="keyword" placeholder="请输入名字"/> <br>
<li v-for="(p,index) of filterPersons" :key="p.id">
{{p.name}} - {{p.age}}
</li>
<h3>列表过滤(computed实现)</h3>
模糊搜索:<input type="text" v-model="keyword2" placeholder="请输入名字"/> <br>
<li v-for="(p,index) of key_person" :key="p.id">
{{p.name}} - {{p.age}}
</li>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
var vm = new Vue({
el: root,
data:{
persons:[
{id:"001",name:"马冬梅",age:32},
{id:"002",name:"周冬雨",age:18},
{id:"003",name:"周杰伦",age:26},
{id:"004",name:"温兆伦",age:27}
],
// 搜索关键字
keyword:"",
// 过滤后的数据
filterPersons:[],
persons2:[
{id:"01",name:"马冬梅",age:32},
{id:"02",name:"周冬雨",age:18},
{id:"03",name:"周杰伦",age:26},
{id:"04",name:"温兆伦",age:27}
],
// 搜索关键字
keyword2:"",
},
methods:{
},
computed:{
key_person(){
return this.persons2.filter((p)=>{
return p.name.indexOf(this.keyword2) !== -1
})
}
},
watch:{
keyword:{
immediate:true,
handler(newValue){
/* Array.filter() 用法
它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意：filter()不会对空数组进行检测、不会改变原始数组
语法:Array.filter(function(currentValue, indedx, arr), thisValue)
其中，函数 function 为必须，数组中的每个元素都会执行这个函数。且如果返回值为 true，则该元素被保留；
函数的第一个参数 currentValue 也为必须，代表当前元素的值。
*/
return this.filterPersons = this.persons.filter((p)=>{
// indexOf() 判断一个字符串是否包含参数字符串,返回匹配值的首字符索引,不存在返回 -1
// 并且每个数组都包含空串
// console.log("过滤器的this是:",this); //this 因为是箭头函数指向父级上下问,即 vm
return p.name.indexOf(newValue) !== -1;
})
}
}
}
});
</script>
</body>
</html>
表单数据收集
生命周期
注: 生命周期钩子函数共有4对,8个,即:
-
beforeCreate
-
Created
-
beforeMount
-
Mounted
-
beforeUpate
-
Updated
-
beforeDestory
-
Destoryed
组件化编程
组件:用来实现局部特定功能效果的代码集合
Vue与VueComponent之间的关系
VueComponent是组件的构造函数,下面将组件实例对象称为vc
实际上,组件就是继承自Vue,只不过组件没有el配置属性,其他vue该有的它都有
此外,请注意,在组件中的配置项(如methods中定义的函数)它们的this应该是指向vc的
vue脚手架(CLI)
CLI即command line Interface,命令行接口,在使用单文件组件的时候会用到
安装脚手架
注意:使用的命令行尽量都使用管理员权限的命令行
-
脚手架的安装需要node.js环境
node.js安装与配置
由于 Node.js 中默认安装了 npm，所以不用额外配置就能在全局命令中使用
npm命令，如果要使用自己安装的 npm 时，如 cnpm ，那么就需要像上面一样添加相应的环境变量然后在cmd或者shell中测试一下是否安装成功了：输入node -v与npm -vnode.js修改默认下载地址
在node.js下新建两个文件夹如下所示
随后输入命令修改配置:
npm config set prefix "D:\node安装目录\node_global" 注意:目录自行替换
npm config set cache "D:\node安装目录\node_cache"
将来全局安装的东西就会跑到这个文件夹的node_modules文件夹里面去了。
配置npm镜像源
输入如下命令:
npm --registry https://registry.npm.taobao.org install express -g
配置环境变量
增加系统环境变量NODE_PATH 内容是：D:\node安装目录\node安装目录\node_modules
最后编辑用户变量里的Path，将相应npm的路径改为：D:\node安装目录\node_global(以自己路径为主)
至此node.js环境就配置好了
下载脚手架CLI
命令 :npm install -g @vue/cli
使用脚手架
切换到需要创建项目的目录
创建项目: vue create 项目名
运行项目: npm run serve
项目结构
基本的html页面相关说明
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- 兼容IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 开启移动端最理想视图 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 引入图标, <%= BASE_URL %>表示脚手架配置处理的路径 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 引入配置的网页标题 -->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- noscript标签当浏览器不支持js的时候才会渲染 -->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
配置修改
vue.config.js配置文件在项目的根目录下(没有可以在自己新建)
随后来到vue官网的CLI配置栏目进行查找: 配置参考 | Vue CLI (vuejs.org)
