Vue基础总结
2.1模板语法(双大括号语法{{}})
mustache语法中是支持书写js的
1、用法:
- 内容: 我们需要加 {{}}
- 属性: 我们不需要加 {{}}
- 属性要想使用,我们必须依靠一个知识点: 指令
eg:
<body>
<div id="app">
<p> str : {{ str }} </p>
<p v-html = "str" > </p>
</div>
</body>
<script src="./lib/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
str:'hello world'
}
})
</script>
2、vue中的js的支持性
js中的数据类型:
基本数据类型: number string null undefine boolean
引用数据类型: Object
总结:
- 语法
- 流程控制
- 条件判断
- 循环
- 三目运算符
- 数据类型
- 经过输出我们发现数据类型都是支持的
null 和 undefined 是不会显示的,其他数据类型是可以显示的
mustache语法中支持三元表达式,同样也支持运算符
短路原则也是支持的
2.2 指令(指令的目的是做什么: 操作DOM)
1、数据展示:v-html, v-text 也就是可以解析 xml 数据
<p> {{info}} </p>
<p v-text="info"> </p>
<p> {{xml}} </p><!-- 会把标签也解析出来 -->
<p v-html="xml"> </p>
2、条件渲染:
-单路分支 v-if
<p v-if = "flag"> 你好,朋友! </p>
-双路分支 v-if v-else
<p v-if="flag"> 朋友,你好。 </p>
<p v-else > 今天天气有点冷。 </p>
-多路分支 v-if v-else-if v-else
<p v-if = "type==='A'"> A</p>
<p v-else-if= "type==='B'"> B</p>
<p v-else > C </p>
3、条件展示:v-show
<p v-show = "show_flag"> 世界,你好! </p>
4、列表渲染:v-for
<h4> 普通数组 </h4>
<ul>
<li v-for ="item in arr">
{{ item }}
</li>
</ul>
<h4> json数据类型 </h4>
<ul>
<li v-for = "item in jsonData">
<p>name:{{item.name}}</p>
</li>
</ul>
<h4> 对象渲染</h4>
<ul>
<!-- item表示值,对象本无序(index规定对象里的属性在同一层) -->
<li v-for = "(item,key,index) in obj">
<p> item:{{item}} </p>
<p> key:{{key}} </p>
<p> index:{{index}} </p>
</li>
</ul>
<h4> 普通字符的渲染 </h4>
<ul>
<li v-for = "aa in 10">
<p>{{aa}}</p>
</li>
</ul>
<ul>
<li v-for ="item of info ">
<p> {{item}} </p>
</li>
</ul>
<h4> 两层数据渲染 </h4>
<ul>
<li v-for ="item in nestData">
<p> {{ item.name }} </p>
<ul>
<li v-for ="ele in item.floors">
<p> {{ele.name}} </p>
</li>
</ul>
</li>
</ul>
5、单项数据绑定:v-bind
<img v-bind:src="img" alt="">
<!-- v-bind 简写 -->
<img :src="img" alt="">
6、双向数据绑定:v-model
使用条件:仅仅是使用在表单元素身上 form input checkbox ...
<input type="text" v-model = "info">
7、v-pre 可以用来阻止预编译,有v-pre指令的标签内部的内容不会被编译,会原样输出
<span v-pre> {{不会被编译,会原样输出}} </span>
8、v-once 在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。
<!-- 当修改input框的值时,使用v-once指令的p元素不会随之改变,而第二个p元素时可以随之改变的 -->
<p v-once> {{info}} </p>
<p> {{info}} </p>
<p>
<input type="text" v-model = "info" name="">
</p>
9、v-cloak - 保持在元素上直到关联实例结束编译
<p v-cloak> {{info}} </p>
注释:
v-html: 非转义输出: 将xml类型数据解析
v-text 和 {{}} 结果是一样的,但是{{}} 有个短暂的{{}} 显示
项目; v-text 和 {{}},我们选择 {{}}
v-if的单路分支效果和 v-show 一样
*****面试: v-if vs v-show 有何区别呢?****************
v-if控制的元素的存在与否
v-show控制的事元素的display: none 属性
性能的差别:
当初始条件都为false时,v-show的初始渲染开销较高
当频繁切换时,v-if的切换开销较高
项目中:
频繁切换: v-show
切换不频繁; v-if
v-bind 单项数据绑定
- 作用: 将一个数据赋值给已有属性
v-model
- 作用: 实现双向数据绑定
- 作用范围: 表单元素,因为它默认绑定了 value
- 经验: 看到表单元素,直接上v-model
v-pre -可以用来阻止预编译,有v-pre指令的标签内部的内容不会被编译,会原样输出
v-once -只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静 态内容并跳过,这可以用于优化更新性能。
v-cloak - 保持在元素上直到关联实例结束编译,
可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。
当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。