认识Vue.js
认识Vue.js
- Vue是一个渐进式的javascript框架
- 渐进式 【 越学越难 】
- Vue的作者是 尤雨溪
- Vue是一个个人项目 【 React是facebook的团队项目 】
- Vue是一个MVVM框架 【 MVVM是MVC的衍生架构 】
- 扩展: 司徒正美 avonlon.js 也是MVVM框架,也是个人项目
- Vue是一个单项数据流的框架
- Vue版本发布的时间
- Vue 1.x 2014
- Vue 2.x 2016 【 es6 vue 微信小程序 angular2.0 ... 】
指令
- 使用形式:
- 绑定在dom的属性身上
- 为了区别自定义属性,vue提供的指令都携带 v-
- 数据展示
- v-html 非转义输出 , 可以解析 xml类型数据
- v-text
- 条件渲染
- v-if
- v-else-if
- v-else
- 条件展示
- v-show
- v-if vs v-show
- v-if是真正的控制dom的存在与否,v-show 是控制dom的display:none属性
- 如果初始条件都为false,v-if会惰性渲染【 不渲染 】,但是v-show不管条件是什么都会渲染,所以v-show的初始渲染开销较高
- 如果我们要频繁的切换flag,那么我们使用谁? 我们使用 v-show , 反之,使用v-if
<div id="app">
<div class="container">
<h3> 数据展示 </h3>
<p> {{ msg }} </p>
<p v-html = "msg"></p>
<p v-text = "msg"></p>
<hr>
<h3> 条件渲染 </h3>
<h4> 条件渲染 - 单路分支 </h4>
<p v-if = "flag"> 条件 - 单路分支 </p>
<h4> 条件渲染 - 双路分支 </h4>
<p v-if = "flag1"> 条件 - 双路 - 1 </p>
<p v-else> 条件 - 双路 - 2 </p>
<h4> 条件渲染 - 多路分支 </h4>
<p v-if = " type === 'A'"> 条件 - A </p>
<p v-else-if = "type === 'B'"> 条件 - B </p>
<p v-else> 条件 - C </p>
<hr>
<h3> 条件展示 </h3>
<p v-show = "flag2"> 条件 - 展示 </p>
<hr>
<h3> 列表渲染 </h3>
<h4> 数组 </h4>
<ul>
<li v-for = " (item,index) in lists">
{{ item }} -- {{ index }}
</li>
</ul>
<h4> 对象 </h4>
<ul>
<li v-for = " (value,key,index) in obj ">
{{ value }} --- {{ key }} --- {{ index }}
</li>
</ul>
<h4> json </h4>
<ul>
<li v-for = "(item,index) in json">
<p> 商品名称: {{ item.shopName }} -- {{ index }} -- {{ item.id }} </p>
</li>
</ul>
<h4> 列表渲染特殊数据 </h4>
<ul>
<li v-for = "item in 10">
{{ item }}
</li>
</ul>
<h4> 列表渲染嵌套 </h4>
<ul>
<li v-for = "item in banners">
<p> {{ item.name }} </p>
<ul>
<li v-for = "val in item.child">
{{ val.name }}
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '<div> hello Vue.js</div>',
flag: false,
flag1: true,
type: 'A',
flag2: false,
lists: [1,2,3,4],
obj: {
id: 1,
name: 'Gabriel Yan',
age: 16
},
json: [
{
id: 1,
shopName: '商品一'
},
{
id: 2,
shopName: '商品二'
},
{
id: 3,
shopName: '商品三'
}
],
banners: [
{
id: 1,
name: 'banner1',
child: [
{
id: 1,
name: 'banner1 - 1'
}
]
},
{
id: 2,
name: 'banner2',
child: [
{
id: 2,
name: 'banner2 - 2'
}
]
},
{
id: 3,
name: 'banner3',
child: [
{
id: 3,
name: 'banner3 - 3'
}
]
}
]
}
})