2020.10.12.叶梦宇
vue
一，什么是vue
vue是第三方开发的，渐进式的，基于MVVM设计模式的纯前端的js框架
第三方：别人写好的，我们直接下好即可
渐进式：可以逐步在项目中引入vue各项功能，同时可以与其他技术混用，但是不推荐（只要不是使用框架，一律使用es5，不能出现es6；我们使用框架的时候就使用es6）
mvvm 设计模式：
1，传统前端三大部分：html/css/JavaScript
问题：html/css功能都太弱了，对于页面中发生的一切变化都需要JavaScript来编写，导致了需要JavaScript编写大量重复增删改查操作
2，现代前端三大部分：（mvvm）
界面（view）：指网页中的元素和样式，一般指的是html/css。view是html网页中的一个需要动态加载内容的父元素，比如:"div#app"。html中的视图，也被称为模板template，如果发生template错误，那么就在html中查找就可以了
数据模型（model）：集中保存页面中所需要的所有变量和变量值。模型，指程序中
控制器（viewmodel）：视图模型/控制，用于替代之前的DOM/jquery操作，封装了重复的增删改查操作，吧模型中的数据和视图中html绑定在一起。vue类型提供的就是一种强大的viewmodel对象，可以9自动同步数据和页面元素，专门负责自动将模型中的变量值自动同步到界面中所需要的位置，实现实时同步
viewmodel核心原理：（响应系统/虚拟DOM树）
纯前端：不需要任何后端技术，就能够独立运行
框架：包含核心功能的半成品代码开发人员只需要根据业务的需求，添加定制自己个性化 的 一部分内容即可
二，对比原生DOM，jQuery，Vue框架
1，原生DOM：使用原生DOM，必须是一步一步来，而且每一步都不能少，步骤上非常繁杂，
问题：jQuery中有多少种查找方法？
查找id的元素，查找class的元素，查找name的元素
2.jQuery：jQuery其实是对DOM的每一步都进行了简化，但是并没有从根本上改变程序流程
3，Vue：
优点：已经包含核心功能，而且已经封装了很多重复的功能，编写时我们就不必要再编写重复的功能，比如：增删改查
再开发中彻底简化了开发步骤
低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
缺点：旧浏览器不兼容，开发成员需要彻底改变编程习惯和思维
DOM树重绘问题：一个两个看不出来，弄几百个会卡
三，为什么使用Vue？什么时候使用Vue
1，Vue适用于于以Vue适用于以数据操作为主的项目(web/app)，2.我们使用vue框架可以提高项目的开发效率
如何在项目中使用Vue
下载独立的Vue.js文件：打开官网，点击页面中的起步按钮，之后再在页面左侧选择安装，在安装下选择要 下载的版本
最好使用开发版本的，会有警告和提示
在网页中引入Vue，js。
vue的基本用法
问题：new Vue的绑定原理
其实就是创建一个viewModel对象，自动的绑定界面和数据，new Vue 就会自动将data中的初始值，替换到界面中所有的{{变量}}的位置，只要data中的值发生变化，new Vue就会自动将新的变量值，更新到页面中{{变量}}的位置
new Vue中包含了两大子系统（响应系统，虚拟DOM树）
1，响应系统：new vue（)刚创建的时候，需要先引入data对象，并自动为data中每个变量添加访问器属性保护起来，所有访问器属性都 直接隶属于new vue 对象。如果想要修改fdata中的变量，可以通过“this.变量名”的方式进行访问。但是，其实都是访问变量的set访问器，而且，new vue（）在每个set 访问器中都添加了通知机制，只要修改变量，就会自动调用访问器，只要调用了访问器，就会触发通知。
2，虚拟DOM树：new vue（）通过扫描真实的DOM树，形成一个简化版的DOM树模型，它仅包含可能变化的属性，那些固定不变的属性和变量，一点都不包含，因为真实的DOM树太大了，包含了很多无关的属性，不便于查找，所以我们需要使用虚拟DOM树
优点：1，小，遍历极快，而且只修改变化的元素，影响的范围小
2，封装了重复的增上改查操作，极大的减少了代码量
3，效率高，仅修改个人可能受影响
什么是绑定语法
1,绑定语法就是专门为html添加变量，html本身并不支持变量，但是html中的个别内容又需要根据程序中的变量自动变化，当html中的任何一个位置的内容，需要根据程序中语法：{{变量/js 表达式}}
双花括号{{}}，也叫大胡子语法，官方语法：mustache，补缺，插值的意思，大胡子语法，用于特定的model数据绑定到视图中，当model数据发生了改变，所有用到显示树的{{}}}，里面数据会自动更新。
注意：不能使用大胡子语法动态绑定属性
2,指令（13种）
什么是指令？
Directive，指令就是为html添加新功能的自定义属性，因为html本身是静态的，不具备任何的动态生成能力，所以当我们想要 在html种使用一些特征的时候，就要进行绑定
v-bind
el：
挂载点：支持id，class，标签选择器。（同时也作用到子代元素）
建议使用id选择器
只支持双标签，不能用body，html
2，双花括号里可以写三目运算符，可以写计算数值，进行==，进行比较><（不推荐在双花括号里写这写）
data
数据对象
可以写复杂数据，遵守js中的语法
<div id="app">
{{message}}
<h2>{{school.name}}</h2>
<h3>{{arr[0]}}</h3>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
message:"哈哈哈哈",
school:{
name:"lili",
},
arr:["1","2","3"]
}
})
</script>
v-text 设置标签的文本值
<div id="app">
<h2 v-text="message">当丁丁打</h2>
<!-- 结果是哈哈哈哈， -->
<!-- 因为v-text覆盖该标签下的所有的文本， v-text="message"中可以使用拼接字符串-->
<h2>成都{{message}}</h2>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
message:"哈哈哈哈"
}
})
</script>
v-html:设置标签的innerHtml
可以解析网页也可以点
<div id="app">
<p v-html="content"></p>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
content:"<a href=''>百度</a>"
}
})
</script>
v-on:为元素绑定事件
<div id="app">
<button type="button" v-on:click="doit">点击1</button>
<!-- 简写模式 -->
<button type="button" @click="doit">点击</button>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
count:0
},
methods: {
doit: function () {
alert("做个程序元")
}
}
});
<div id="app">
<h2>{{food}}</h2>
<button type="button" @click="changefood">添加食物</button>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
food:"番茄炒蛋"
},
methods: {
changefood: function () {
this.food+="蛋炒番茄"
}
}
});
</script>
补充
v-on传递自定义参数，事件修饰符
<div id="app">
<button type="button" @click="doit(666,888)">点击</button>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
},
methods:{
doit:function(x1,x2){
console.log(x1);
console.log(x2)
}
}
});
</script>
问题：如果我们将button按钮换成a标签，href=".."属性，默认会改变我们的地址栏或跳转到其他页面
解决问题：（阻止默行为）
1. js中
实参：event
function(e){
e.preventDefault();
}
2.vue中
实参：\(event
fn(e){
e.preventDefault();
}
提示：\)event是vue对象的内置变量，是将DOM事件对象e封装后得到的产物，是现成的内置变量，可以直接使用，只要想要vue的处理函数中使用事件对象，就必须在html绑定的调用方法中传入$event
3. 使用事件修饰符
事件修饰符会自动实现原DOM事件对象操作的特殊属性，当需要修改事件的行为时，就要使用事件修饰符
.prevent
使用.prevent代替内置变量\(event下的e.preventDefault()，阻止默认行为
.stop
使用.stop代替内置变量\)event下的e.stopPropagation(),取消冒泡/蔓延
多个修饰符可以同时修饰同一个事件，而且与顺序无关
v-show:根据表达式的真假，地址元素的显示和隐藏（修改display：none）
<div id="app">
<h2 v-show="isShow">哈哈哈哈</h2>
<button type="button" @click="changeshow">点击显示和隐藏</button>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
isShow:"ture"
},
methods: {
changeshow: function () {
this.isShow=!this.isShow
}
}
});
</script>
v-if 根据表达式的真假，地址元素的显示和隐藏（操作Dom元素，直接将元素从DOM树移除）
//如果haha大于1就显示哈哈哈哈
//如果小于1就显示heheehehe
<div id="app">
<h2 v-if="haha>1">哈哈哈哈</h2>
<h2 v-else>heheheheheh</h2>
//也可以多个选一个
//v-if
//v-else-if
//...
//v-else
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
haha:0,
},
methods: {
}
});
</script>
//其他用法和v-show一样
面试题：为什么被移除的元素还能显示回来呢
v-bind：设置元素属性（src，tilte，class）
//src
<div id="app">
<img v-bind:src="imgsrc" >
<!-- 简写 -->
<img :src="imgsrc" >
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
imgsrc:"img/sheng1.jpg"
},
methods: {
}
});
</script>
//title
<div id="app">
<img :src="imgsrc" :title="imgtitle" >
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
imgsrc:"img/sheng1.jpg",
imgtitle:"哈哈啊哈哈"
},
methods: {
}
});
//class
<style type="text/css">
img{
width: 50px;
height: 50px;
}
.active{
border: 5px solid #ff0;
}
</style>
</head>
<body>
<div id="app">
<img :src="imgsrc" :title="imgtitle" :class="{active:isActive}" @click="toggleActive" >
//如果isActive为ture这个类的样式就显示
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
imgsrc:"img/sheng1.jpg",
imgtitle:"哈哈啊哈哈",
isActive:false
},
methods: {
toggleActive:function(){
this.isActive=!this.isActive;
}
}
});
</script>
</body>
</html>
v-for:根据数据生成列表
<div id="app">
<ul>
<li v-for="item in arr">{{item}}</li>
//可以自动循环出四个列表
</ul>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
arr:[1,2,3,4]
},
methods: {
toggleActive:function(){
this.isActive=!this.isActive;
}
}
});
</script>
<div id="app">
<h2 v-for="item in vegtables">{{item.name}}</h2>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
vegtables:[
{name:"小红"},
{name:"小名"}
]
},
});
</script>
注意：of可以代替in，因为要更接近js迭代器语法
v-model 获取和设置表单元素（双向绑定）
<div id="app">
<button type="button" @click="setM">修改message的值</button>
<input type="text" v-model="message" name="" id="" value="" />
<h2>{{message}}</h2>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message:"黑马"
},
methods:{
setM:function(){
this.message="成都"
}
}
});
</script>
v-cloak:防止用户看到{{}}语法
当网速较慢，vue。js还没有加载完成的时候页面上会闪动{{}}的字样，知道vue创建实例，编译模板时，DOM才被替换 ，这个过程是有闪动的
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
v-once：只绑定一次，设定之后就不可改
<div id="app">
<p v-once>{{message}}</p>
<button type="button" @click="change">点击改变值</button>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message:"不可改变的1234"
},
methods:{
change:function(){
this.message="西兰花"
}
}
});
</script>
学习心得
终于要开始校招和面试了，希望自己加油
近期评论