复习
"""
1、vue框架：渐进式js框架
2、优点：数据双向绑定 虚拟DOM 数据驱动 单页面
3、下载导入 | CDN
4、简单操作：数据、事件、样式
5、指令：文本、事件、属性、表单、条件
"""
今日
"""
1、剩余指令：条件、循环
2、实例成员：computed、watch、生命周期钩子
3、组件：局部、全局、组件间交互
"""
指令
条件指令
<div id="app">
<p v-if="r1" key="p_r1">if条件</p>
<p v-show="r2">show条件</p>
<!--{{ num + 1 - 5 * 2 + '好的' }}-->
<ul>
<!--v-else会默认与v-if等有条件的分支绑定-->
<!--v-else-if必须由条件才和有条件v-if分支绑定-->
<li v-if="tag == 1">111</li>
<li v-else-if="tag == 2">222</li>
<li v-else>333</li>
</ul>
<ul>
<li @click="action('a')">a</li>
<li @click="action('b')">b</li>
<li @click="action('c')">c</li>
</ul>
<ul>
<li v-show="flag == 'a'">aaa</li>
<li v-show="flag == 'b'">bbb</li>
<li v-show="flag == 'c'">ccc</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
r1: false,
r2: false,
tag: 2,
flag: 'a'
},
methods: {
action: function (s) {
this.flag = s
}
}
})
</script>
循环指令
<div id="app">
<p>{{ nums[2] }}</p>
<ul>
<!-- 只遍历值 -->
<li v-for="num in nums">{{ num }}</li>
</ul>
<ul>
<!-- 值与索引 -->
<li v-for="(num, index) in nums">{{ num }} {{ index }}</li>
</ul>
<ul>
<!-- 值，键，索引 -->
<li v-for="(v, k, i) in people">{{ v }} {{ k }} {{ i }}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
nums: [5, 3, 2, 1, 4],
people: {
'name': 'Owen',
'age': 17.5,
'gender': 'others'
}
}
})
</script>
评论案例
<style>
span {
margin-left: 100px;
cursor: pointer;
color: green;
}
span:hover {
color: red;
}
</style>
<div id="app">
<p>
<input type="text" v-model="val">
<button @click="add">评论</button>
</p>
<ul>
<li v-for="(info, i) in infos">
{{ info }}
<span @click="del(i)">x</span>
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
infos: [], // 管理所有留言
val: '' // 管理当前留言
},
methods: {
del: function (i) {
// splice: 从哪个索引开始 操作的位数 操作成的结果(可变长)
this.infos.splice(i, 1) // 删除留言
},
add: function () {
let val = this.val;
if (val) {
this.infos.splice(0, 0, val); // 留言
this.val = '' // 输入框置空
}
}
}
})
</script>
解决插值表达式符号冲突
<div id="app">
${ msg }
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '12345'
},
delimiters: ['${', '}']
})
</script>
总结
"""
指令：
文本：{{}} v-text v-html v-once
属性：v-bind:href | :href :class='c1' :class='[c1, c2]' :style='s1'
（s1={color: "red"}）
事件：v-on:click | @click @click="action" @click="action(msg)" @click="action($event)"
表单：v-model
条件：v-show v-if v-else-if v-else
循环：v-for="(value, index) in list" v-for="(value, key, index) in dict"
成员:
el：挂载点
data：数据
methods：方法
computed：计算 -- 监听方法内所有的变量，返回值给绑定的变量，该变量无需在data中声明
watch：监听 -- 监听绑定的变量，绑定的变量必须在data中声明
"""
组件
# 组件：有html模板，有css样式，有js逻辑的集合体
# 根组件的模板就使用挂载点，子组件必须自己定义template(局部子组件、全局子组件)
局部组件
<div id="app">
<!--div.box>h1{标题}+(p.p${文本内容}*2)-->
<abc></abc>
<abc></abc>
</div>
<script src="js/vue.js"></script>
<script>
// 定义局部组件
let localTag = {
// 1.data要达到组件的复用，必须为每个组件提供一个名称空间(作用域)
// 2.data的值就是一个存放数据的字典
// 需要满足1和2，data值为一个可以产生名称空间的函数的返回值，返回值是字典
data: function () {
return {
count: 0,
// r: ''
}
},
template: `
<div class="box" style="border: solid; 100px">
<h1>标题</h1>
<p class="p1">文本内容</p>
<p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
<button @click="send"></button>
</div>
`,
methods: {
action: function () {
this.count++
},
// 结合JQ完成组件与后台的交互
// send: function () {
// $.ajax({
// url:,
// type:,
// data:，
// success: function (result) {
// this.r = result
// }
// })
// },
// watch: {
// r: function () {
//
// }
// }
}
};
new Vue({
el: '#app',
data: {
},
// 局部组件必须注册
components: {
'abc': localTag
}
})
</script>
全局组件
<div id="app">
<!--在标签中建议使用 - 语法命名，对应js中就是驼峰命名-->
<old-boy></old-boy>
</div>
<script src="js/vue.js"></script>
<script>
// Vue.component(组件名, {组件主体});
Vue.component('oldBoy', {
data: function () {
return {
count: 0
}
},
template: `
<div class="box" style="border: solid; 100px">
<h1>全局</h1>
<p class="p1">文本内容</p>
<p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
</div>
`,
methods: {
action: function () {
this.count++
},
}
});
// 全局组件无需注册
new Vue({
el: '#app',
data: {
}
})
</script>
组件间的交互：父传子
<div id="app">
<!-- local-tag就可以理解为自定义标签，使用msg变量值由父组件提供 -->
<!-- local-tag标签代表的是子组件，owen为标签的自定义属性 -->
<!-- 在子组件内部能拿到owen，就可以拿到父组件的信息 -->
<local-tag :owen="msg"></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let localTag = {
// 子组件拿自定义属性
props: ['owen'],
template: `
<div>
<h1>信息</h1>
<p>{{ owen }}</p>
</div>
`
};
new Vue({
el: '#app',
data: {
msg: '父级的信息'
},
components: {
// 'localTag': localTag,
// localTag: localTag,
localTag // 在页面中 <local-tag>
}
})
</script>
组件间的交互：子传父
<div id="app">
<h1>{{ title }}</h1>
<global-tag @recv="get_title"></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('global-tag', {
template: `
<div>
<input type="text" v-model="msg">
<!--<button @click="action">修改标题</button>-->
</div>
`,
data: function () {
return {
msg: ''
}
},
methods: {
// action: function () {
// let msg = this.msg;
// // recv是自定义的事件
// this.$emit('recv', msg)
// }
},
watch: {
msg: function () { // 只要msg只有变化，就将值同步给父组件
this.$emit('recv', this.msg)
}
}
});
new Vue({
el: '#app',
data: {
title: '父组件定义的标题'
},
methods: {
get_title: function (msg) {
this.title = msg
}
}
})
</script>