vue学习总结一(vue指令和vue常用概念:语法糖,生命周期,过滤器)

Vue 的三大特点:简单、灵活、高效

1.简单 只要开发者有HTML、CSS、JavaScript三个的基础我们就可以使用它去完成项目的开发，不用像 Angular 需要对 Typescript、RxJS 等等一些东西做一个新的学习，这一点上来说 Vue 的上手难度来的更低一些。

2.灵活 我们可以单独引入 Vue.js 文件配合项目的其他配置使用，我们也可以用 vue/cli 一整套的框架使用。给我们带来了更加灵活的使用方式，我们可以根据自己的情况去做出选择。

3.高效 Vue 借鉴了 AngularJs 的一些优点，去其性能上的缺点，采用非常高效的虚拟 DOM 的渲染方式，让其在渲染性能上有很大的优势，在代码的体积上一个包含了 Vuex + Vue Router 的 Vue 项目 (gzip 之后 30kB),这个对于 Angular 最终的代码的体积上有相对的优势。

一.vue指令总结:

1.v-text

作用:渲染内容,它不会解析html标签;
写法:
1.v-text=‘内容’ : 替换全部内容;
2.{ {内容}} :只替换占位的位置(常用);
注意:使用{ {内容}}有一个问题是当项目比较大或者网速比较卡时会显示出"{ {内容}}",解决方法:

方法1:

<style>
[v-cloak]{
    
display:none !important;
}
<div v-cloak id="app">
自己的代码
</div>
</style>

方法2:直接用v-text代替{ {内容}}

2.v-html

作用:渲染内容,它会解析html标签(不常用,因为直接解析来源不明的代码,可能会出现安全问题);
写法:
v-html=“内容” :会替换全部内容;

3.v-show和v-if

作用:两者都可以用来显示和隐藏;
写法和区别:
v-show=“true/false”,只是添加了display:none;
v-if=“true/false”,会直接把标签都删除;

4.v-if 也可以拿来作判断条件

5.v-if,v-else-if,v-else三者可以搭配一起使用

如:

		<h3 v-if="age<18">玩泥巴</h3>//小于18才显示
        <h3 v-else-if="age>=18&&age<25">去网吧</h3>//大于和小于
        <h3 v-else>热衷于广场舞事业</h3>//其它情况

注意点:v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

6.v-for

1.作用:遍历,循环,可用于数组,对象,字符串和数字
写法:v-for="(item,index) in 循环的内容"
2.也可以用来遍历对象v-for="(value,key) in obj",但是参数跟遍历数组不同,参数1是值,参数2是键(即属性)