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 指令来解决这一问题。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
