20201012王杉
学习内容：
-
什么是Vue：
- Vue是第三方开发的、渐进式的、基于MVVM设计模式的、纯前端的JS框架
-
Vue的基本页面：
<div id="app"> <!-- 编写内容--!>
</div><script> var vm = new Vue({
el:'#app',
data:{
msg:'hello Vue!'
},
methods: {
alertMsg:function(){
alert(this.name);
}
}
});
</script> -
Vue语法：
绑定语法：{{变量/js表达式}}
-
Model语法：{{变量名}}
-
算数/比较/逻辑/三目运算：{{20+20/20>12/true&&false/a>b?a:b}}
-
方法调用：{{alertMsg()}}
<script> var vm = new Vue({
el:'#app',
data:{
msg:'hello Vue!'
},
methods: {
alertMsg:function(){
alert(this.name);
}
}
});
</script> -
对象属性访问：{{obj.age}}
<script> var vm = new Vue({
el:'#app',
data:{
obj:{
age:15
}
}
});
</script> -
数组下标访问：{{arr[0]}}
<script> var vm = new Vue({
el:'#app',
data:{
arr:[1,2,3,4]
}
});
</script> -
字符串拼接：
{{`模板字符串`}} <script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello Vue!'
}
});
</script> -
创建对象：{{new Date().toLocaleString()}}有返回值就会返回，没有或者使用if和for就不行
注意：：不能使用{{}}动态绑定属性
-
-
指令：
-
v-bind:
<style> .fontColor{
color: red;
}
.backGround{
background-color: #f0f;
}
</style>
<div id="app">
<!-- v-bind绑定class属性 -->
<div v-bind:class="fontColor">{{new Date().toLocaleString()}}</div>
<!-- v-bind动态绑定可变 -->
<div v-bind:[attr]="backGround">{{new Date().toLocaleString()}}</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
fontColor:"fontColor",
attr:"class",
backGround:"backGround",
}
});
</script> -
控制元素的显示/隐藏
①v-show
②v-if v-else-if v-else
<!-- v-show会判断是否显示 --> <h2 v-show="true">{{msg}}</h2>
<!-- 原理和display：none一样 -->
<!-- 两个选择二选一显示，v-if，v-else -->
<h2 v-if="num==0">啊哈哈哈哈</h2>
<h2 v-else-if="num>3" >啊哇哇哇哇</h2>
<h2 v-else>啊嘿嘿黑嘿</h2>
<!-- 不显示的原因是彻底删除了，v-if，v-else-if ，v-else必须是紧邻的兄弟不能有其它元素的间隔--> -
反复生成多个相同结构的元素v-for：
<!-- 反复生成多个相同结构的元素 v-for：会自动遍历数组/对象/字符串中的每一个元素，每遍历一个元素，就会自动创建 --> <table>
<tr>
<td>名字</td>
<td>年龄</td>
</tr>
<tr v-for="(elem,i) of obj":key="i">
<td>{{elem.name}}</td>
<td>{{elem.age}}</td>
</tr>
</table>
<!-- i:下标，：key是在内存中为每一个html元素副本添加一个唯一标识。如果每一个html元素副本都有唯一标识，则每一次修改数组元素的时候，
v-for只需要找到那个受影响的那个html元素 效率高！！！！-->
<!-- 注意：1.v-for一定一定要写在重复生成的元素上而不是父元素上，2.如果不关心下标，只关心元素，可以简写（不加i的值） -->
<!-- <any v-for="elem of 数组/对象/字符串"> -->
<!-- 3.of和in是可以互相替代的，用法完全一致，vue中v-for同一了js中for of和for in，既可以遍历索引数组，又可以遍历对象 -->
<!-- 4.of会自动取出数组/集合中的每个元素的值和下标，保存到右边变量中，如果of后是数字，那么会从1开始迭代递增到目标数字 --> -
v-on：和v-bind:一样可以设置成普通绑定和动态绑定
<!-- v-on --> <!-- 点击button按钮，显示：data中的对象数据 -->
<button v-on:click="alertMsg">输出</button>注意：v-on: 可以缩写 @
-
组织默认行为和组织冒泡
<div v-on:click='handle0'> <button v-on:click='handle3'>点击触发</button>
<!-- 阻止冒泡 -->
<button v-on:click.stop='handle3'>点击触发</button>
</div>
<!-- 阻止默认事件 (事件修饰符)没有顺序,可以多个修饰-->
<a v-on:click.prevent.stop='handle3' href="http://www.baidu.com">百度</a>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello Vue!'
},
methods:{
handle0:function(){
this.num++;
},
handle3:function($event){
//原生js阻止冒泡
// event.stopPropagation();
//原生js阻止默认行动
// event.preventDefault();
}
}
});
</script> -
v-html绑定html片段
<!-- 存在安全问题 本站内部数据可用 第三方数据不可用 --> <div v-html='msg1'></div> -
v-cloak：防止用户短暂看到{{}}的语法
<style> [v-cloak]{
display: none;
}
</style>
<!-- 插值表达式{{}} 会出现闪动使用v-cloak避免出现 -->
<div v-cloak>{{msg}}</div> -
v-text:是{{}}的等效指令，只不过v-text是写在属性中的，而{{}}是写在内容中的
<!-- 相比插值更方便 不会出现闪动 --> <div v-text='msg'></div> -
保护{{}}中的内容不被编译
v-pre:保护当前元素中的{{}}语法，不会被绑定渲染
<!--显示原始信息 跳过编译 --> <div v-pre>{{msg}}</div> -
唯一不变元素
v-once:当前元素的{{}}语法对应的数据只能绑定一次，以后即使模型数据发生改变，也不会再改变了
<!-- 响应式 --> <!-- <div>{{msg}}</div> 在console框中修改vm.msg值会发生改变-->
<!-- 在console框中修改vm.info值不会发生改变 只编译一次后续没有响应式的能力
如果使用的信息不需要修改 就使用v-once 可以提高性能 不需要被监听是否被修改 -->
<!-- 原理：watch中，有一个队列，维护这每个数据变量和页面之间的对应关系。每次数据模型发生改变后,watch每次数据改变都会通知watchwatch会遍历受到该数据变量影响的元素，并逐个的修改他们。通过减少监视的元素个数，可以优化页面绑定的效率 -->
<div v-once>{{info}}</div>
-
心得：
今天学习了很多，不错。
近期评论