VUE - 02
VUE使用：
1. html 引入vue
2. new Vue({el: '#app'}) # 挂载点
3. 成员 data,methods:{}
4. 内容指令
-- 插值表达式 {{ 变量表达式 }}
-- 过滤器 {{ 变量表达式 | 过滤器 }} {{ a,b | f(c,d) | f1 }}
Vue.filter('f',function(a,b,c,d){return a+b})
-- 文本指令 v-text='变量' v-html= '变量' v-once='变量' 只是原始值
5. 属性指令 v-bind:style='变量' 简写： ：class='变量' {c1: x1} x1为true或false,表示c1是否存在 [c1,c2 ] 表示双类名
6. 事件指令 v-on:click='方法' 简写： @mouseover = '方法（$event,$data）'
7. 表单指令： v-model='变量' （单选框： 复选框 选中非选中）
8. 条件指令： v-if | v-show | v-if v-else-if v-else
--
options - 成员获取
# 直接拿不到的成员，使用options去拿
new Vue({
el: '#app',
data:{
msg:'数据'
},
methods:{
btnClick(){
console.log(this.msg)
}
},
arr: [1,2,3,4],
filters:{ #filter的第二种写法
add(v){
return v+1
}
}
})
# 外界想访问data, 必须 let app = new Vue console.log(app.msg) app.$data
# 使用options去拿成员， data,methods, arr等 app.$options.arr
{{ $options.arr }}
v-pre 原义指令
# 跳过编译过程，直接显示标签的原内容
<span v-pre> {{ msg }}</span> # 显示 {{ msg }}
# v-pre 内部接触vue控制
<span v-pre>
{{ msg }}
<p v-on="abc"></p> # v-on没有了特殊含义，只是一个属性名
</span>
for - 循环指令
# 值
<div>
<p v-for="v in arr">
<span>{{ v }}</span>
</p>
</div>
# 索引
<div>
<p v-for="(v,i) in arr">
<span>第{{ i+1 }}个值:{{ v }}</span>
</p>
</div>
# 字典
<div>
<p v-for="(v,k，i) in student">
<span>
{{ k,v | f1 }} # 过滤器返回
</span>
</p>
</div>
# 循环套循环
<div>
<!--
name: Bob | aendge:18 | ger:男
name: Tom | age:1 | gender:男
-->
<p v-for="stu in stus">
<!--<span v-for="(v, k, i) in stu">{{i?' | ':''}}{{k}}:{{v}}</span>-->
<span v-for="(v, k, i) in stu">{{i|f2}}{{k}}:{{v}}</span>
</p>
</div>
delimiters: 分隔符
# Django模板中也可以导入vue 使用，但是 {{}} 的用法就会冲突
# 为了解决冲突问题，使用delimiters分隔符
new Vue({
el: '#app',
delimiters:['[[',']]'], # delimiters:['$[',']']
data:{
msg:'message'
}
}
使用： [[ msg ]]
计算属性成员
# 使用场景： 一个计算后属性的值，可以来源于东哥属性值
# 检测某个值变化，可以设置回调的方法
<p>
<input type="text" v-model="a">
<input type="text" v-model="b">
</p>
{{ letter_change }}
new Vue({
el: '#app',
data: {
msg: '数据',
a: '',
b: ''
},
computed:{
letter_change(){
this.a; // 实时监控a的变化
console.log('变量a发生了变化')
}
}
})
# 注意点：
1. 计算后属性letter_change不能再data中重复定义
2. 计算后属性必须渲染后，绑定方法才能生效
3. 计算后属性绑定的方法中任意变量值发生变化（a）， 方法被调用
4. 计算后属性为只读属性，不可写
<input type="text" v-model="letter_change"> # 报错，因为letter_change只读
# 监听姓名变化
<p>
姓：<input type="text" v-model="firstname">
名：<input type="text" v-model="lastname">
</p>
{{ full_name }}
computed:{
full_name(){
if (this.firstname && this.lastname){
return this.firstname + ' ' + this.lastname
}else{
return '姓名'
}
}
}
监听某个变量，修改另外变量
# b的值永远是a的值的十倍
data: {
num_a: '',
num_b: '',
num_c: '',
},
watch:{
// 监听绑定的属性,该属性可以get,set
// 监听的属性一点发生值更新，绑定的方法会调用
num_a(){
console.log('发生了变化');
this.num_b = this.num_a*10;
this.num_c = this.num_a * 20;
}
}
todolist
<p>
<input type="text" v-model="info">
<button @click="btnClick">添加</button>
<ul>
<li v-for="(m,i) in msg" @click="delFun(i)">{{m}}</li>
</ul>
</p>
new Vue({
el: '#app',
data: {
info: '',
msg: JSON.parse(sessionStorage.msg || '[]'),
},
methods: {
btnClick() {
let info = this.info;
if (info) {
// msg中添加info,尾增
this.msg.push(this.info);
// sessionStorage 不能存列表，用json转换
// sessionStorage.msg = this.msg;
sessionStorage.msg = JSON.stringify(this.msg);
// 首增
// this.msg.unshift(this.info);
// 清空留言框
this.info = '';
}
},
delFun(i) {
// 从第零位开始，操作0位，操作为1
// 从第i为开始，操作一位，操作为空
this.msg.splice(i,1);
sessionStorage.msg = JSON.stringify(this.msg);
}
}
# sessionStorage不能存储列表，需要json转换
组件
# 由template + css + js 组成
-- 组件具有复用性
-- 复用组件是，数据要隔离
-- 复用组件时，方法不需要隔离，因为方法使用隔离数据
# 组件介绍
1. 每一个组件都有自己的template(虚拟DOM)，最后替换真实DOM渲染
2. 挂载点el, 根组件没有规定template,就挂载的真实DOM拷贝出虚拟DOM
3. 挂载点el,根组件规定template, 采用自己的template作为虚拟DOM
4. 所有的new Vue() 产生的组件都称之为根组件，项目开发，只有一个根组件
5. template只能解析一个跟标签
# 类似后端的展位符 '%s%s'%(name,age)
前端写法： `${name}:${age}`
局部组件
# 根组件
new Vue({
el: '#app',
data: {},
})
1. 创建组件
let locatTag = {
}
2. 注册组件
new Vue({
el: '#app',
components: {
ad:localTag,
}
})
3. 使用,渲染组件
<ad></ad> # 页面中以标签形式
# 不支持大写，如果使用大写，如下
localTag: localTag
简写： localTag
使用： <local-tag></local-tag>
全局组件
全局组件：
1. 创建组件
//全局组件
Vue.component('global',{
template: `
<div class="dog">
<img src="img/dog.jpg" alt="">
<h1>全局标题</h1>
</div>
`
});
2. 使用
<global></global>
复用组件的数据隔离
//局部组件
let localTag = {
template: `
<div class="dog" @click="click1">
<img src="img/dog.jpg" alt="">
<h1>标题点击了{{ num }}次</h1>
</div>
`,
methods: {
click1() {
this.num ++
}
},
data(){ # 数据要隔离开，使用方法，每次创建一个新的作用域
return {
num:0
}
}
};
//全局组件
Vue.component('global', {
template: `
<div class="dog" @click="click2">
<img src="img/dog.jpg" alt="">
<h1>全局标题{{count}}次</h1>
</div>
`,
methods: {
click2() {
this.count++
}
},
data(){
return {
count:0
}
}
});
数据传递- 父传子
1. 父级提供数据
new Vue({
el: '#app',
data:{
// 父组件的数据要传给子组件
ads:ads // 数据由后台返回的
},
components:{
localTag
}
})
2. 父级模板中，为子组件标签设置自定义属性 ad_dic, 绑定父级数据
<local-tag :ad_dic="ad" v-for="ad in ads" :key="ad.title"></local-tag>
3. 在子级props中接收自定义属性
//局部组件
let localTag = {
props:['ad_dic'],
template: `
<div class="dog" >
<img :src="ad_dic.img" alt=""> # 这里访问父级数据
<h1>{{ ad_dic.title }}</h1>
</div>
`,
4. 在子组件模板和方法中使用自定义属性名，就可以访问父级数据
'''
注意： 自定义属性： ad-dic, 在使用中 adDic
'''
组件信息交互-子传父
# 先渲染父组件，然后渲染子组件
# 子组件主动设置激活事件，告诉子组件的数据拿到了，传给父组件
<div id="app">
<p>
<input type="text" v-model="info">
<button @click="btnClick">添加</button>
<ul>
<!--自定义事件 @delAction-->
# 第四步： 在父级为自定义事件绑定父级方法
<msg-tag @del_action="del_li" :msg="m" :index="i" v-for="(m,i) in msg" :key="m.info"></msg-tag>
</ul>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let msgTag = {
# 子组件产生数据
props:['msg','index'],
template: `
<li>
// 这里需要把要删除的index传递过来
# 第一步： 点击子组件中标签，触发子组件delFun方法
<span class="del" @click="delFun">x</span>
<span>{{msg}}</span>
</li>
`,
methods:{
# 第二步： 子组件中设置delFun方法
# 激活自定义事件，将参数index 传出去
delFun(){
// alert(this.index)
// 点击子级标签，触发delFunc, 这个方法触发了一个事件delAction(并带了一个参数）
this.$emit('del_action',this.index)
}
}
};
new Vue({
el: '#app',
components:{
msgTag
},
data: {
info: '',
msg: JSON.parse(sessionStorage.msg || '[]'),
},
methods: {
btnClick() {
let info = this.info;
if (info) {
this.msg.push(this.info);
sessionStorage.msg = JSON.stringify(this.msg);
this.info = '';
}
},
# 第五步： 父级实现方法，接收子组件传递的方法
del_li(i){
console.log(i)
// 删除index为i的标签
this.msg.split(i,1);
sessionStorage.msg = JSON.stringify(this.msg)
}
}
})
</script>
'''
子组件提供数据
子组件通过系统事件激活自己的绑定方法，发送一个自定义事件， 携带自身数据
在父组件模板中的子组件标签中为自定义事件绑定父组件方法
父组件实现方法获得子组件数据
'''