Vue指令
1、v-once指令 单独使用，限制的标签内容一旦赋值，便不可被动更改（如果是输入框，可以主动修改）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<input type="text" v-model="msg" v-once> #因为是输入框，一旦赋值，只可主动更改
<p>{{msg}}</p>
<p v-once>{{msg}}</p> #一旦赋值，便不可更改
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
msg:'初始值'
}
})
</script>
</html>
2、v-cloak指令（了解） 防止页面闪烁
1.不处理的情况下，每次新开该页面，都会先渲染{{ }}，会闪烁一下,当vue环境加载成功，{{ }}又会被解析消失。
2.处理后，vue环境没加载好时，#app是被隐藏的，vue环境加载成功，会依次#app的v-cloak属性，就不会出现{{ }}渲染闪烁问题。
<style>
[v-cloak] {
display: none;
}
</style> <div id="app" v-cloak>
{{ }}
{{ }}
{{ }}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
3、条件指令
v-if / v-show
两种都是可以控制标签的显隐，绑定的值是布尔类型的值，当布尔值是false时，就是隐藏标签，当隐藏标签的时候
v-if 是不渲染标签
v-show以display:none方式渲染
v-if / v-else-if / v-else
v-if='变量'
v-else-if='变量'
v-else
一组分支，上分支成立会屏蔽下方所有分支，else分支没有条件，在所有分支不成立后才显示出来
条件指令小案例：点击颜色按钮，下面方框生成对应的颜色
按钮绑定一个点击事件changeBox,根据showName生成对应的颜色框
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
height: 400px;
width: 300px;
}
.r {
background-color: red;
}
.y {
background-color: yellow;
}
.b {
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<div class="em">
<p>
<!--第一种指定按钮颜色变化-->
<!--<button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'r':''">红</button>-->
<!--<button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'y':''">黄</button>-->
<!--<button @click="changeBox('bBox')" :class="showName == 'bBox' ? 'b':''">蓝</button>-->
<!--第二种指定按钮颜色变化-->
<button @click="changeBox('rBox')" :class="{r:showName=='rBox'}">红</button>
<button @click="changeBox('yBox')" :class="{y:showName=='yBox'}">黄</button>
<button @click="changeBox('bBox')" :class="{b:showName=='bBox'}">蓝</button>
</p> <div class="box r" v-if="showName=='rBox'"></div>
<div class="box y" v-else-if="showName=='yBox'"></div>
<div class="box b" v-else></div>
</div> </div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
showName:'rBox'
},
methods:{
changeBox(name){
this.showName=name
}
}
})
</script>
</html>
4、v-pre指令（了解）
v-pre指令可以在vue控制范围内，形成局部vue不控制区域(局部不解析vue语法)
<div id="app">
<p>{{msg}}</p> #正常显示数据 message
<p v-pre>
{{ }} #v-pre指令在vue控制范围内，形成局部vue不控制区域，{{ }}和v-if都会原样输出，不会被解析
<span v-if="hehe"></span>
</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
msg:'message'
}
})
</script>
5、循环指令 v-for
1) 遍历字符串：可以只逐一遍历字符，也可以连同遍历索引
<p v-for="ch in str"></p> | <p v-for="(ch, index) in str"></p> 2) 遍历数组：可以只逐一遍历成员元素，也可以连同遍历索引
<p v-for="ele in arr"></p> | <p v-for="(ele, index) in arr"></p> 3) 遍历字典：可以只逐一遍历值(value)，也可以连同遍历成员键(key)，还可以遍历成员key索引
依次遍历value,key,key索引
<p v-for="v in dic"></p> | <p v-for="(v,k) in arr"></p> | <p v-for="(v,k,i) in arr"></p>
<div id="app">
<div>
<span v-for="ch in str">{{ ch }}</span> #循环字符串
</div>
<div>
<!--针对循环遍历的标签，通过会提供key属性来优化渲染速度，但key的值必须唯一（key可以不用提供） -->
<span v-for="(ch, i) in str" :key="ch + i">{{ i }}{{ ch }}</span>
</div>
<div>
<p v-for="(ele, i) in arr">{{ i }}{{ ele }}</p> #循环数组
</div> <div>
<p v-for="ele in dic">{{ ele }}</p> #循环字典
</div> <div>
<p v-for="(ele, k) in dic">{{ k }}:{{ ele }}</p>
</div> <div>
<p v-for="(ele, k, i) in dic">{{ i }}{{ k }}:{{ ele }}</p> #依次取出字典的value,key,key索引
</div> </div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
str: 'abc123呵呵',
arr: [3, 4, 1, 2, 5],
dic: {
name: 'Tank',
age: 80,
gender: '哇塞',
}
}
})
</script>
todolist留言板案例
1) 留言就是往留言数组中添加数据，删除留言就是从留言数组中移除数据 2) 前台数据库：localStorage 和 sessionStorage
localStorage永久保存数据 (这次案例以localStroage保存)
sessionStorage临时保存数据(当所属页面标签被关闭，数据被清空)
3) 前台localStorage 和 sessionStorage数据库存储的值是字符串类型，所以要存放arr、dic等复杂数据需要JSON参与
点击留言按钮就把输入框中的留言保存在下面，再点击留言就是删除
push是尾增，unshift是首增
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="userMsg"> #获取输入框的值userMsg并且传递给data
<button type="button" @click="sendMsg">留言</button>
</p>
<ul>
<li v-for="(msg, index) in msgs" @click="deleteMsg(index)">
{{ msg }}
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [], // 从数据库中取出所有留言，没有就显示[]
userMsg: '', // 用户留言
},
methods: {
sendMsg() { // 留言事件
// 尾增
// this.msgs.push(this.userMsg);
// 首增
// this.msgs.unshift(this.userMsg); let userMsg = this.userMsg;
if (userMsg) { //判断用户输入的留言是否存在
this.msgs.unshift(userMsg); // 渲染给页面
localStorage.msgs = JSON.stringify(this.msgs); // 同步到数据库
this.userMsg = ''; // 清空留言框
}
},
deleteMsg(index) { //删除操作
// 开始索引 操作长度 操作的结果们 （括号里面三个参数，最后一个参数操作的结果不写就是删除的意思）
this.msgs.splice(index, 1)
}
}
})
</script>
</html>
Vue实例
1、插值表达式符号（delimiters） 了解
生成插值表达式显示的符号
<div id="app">
{{ msg }} //显示 {{msg}}
{[ msg ]} //显示 12345
</div>
<script>
new Vue({
el: '#app',
data: {
msg: ''
},
// delimiters: ['{{', '}}'],
delimiters: ['{[', ']}'],
})
</script>
2、计算实例 computed 计算是把多个事件合成一个（监听多个合成一个）
// 1) computed是用来声明 方法属性 的
// 2) 声明的方法属性不能在data中重复定义
// 3) 方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听
// 4) 计算属性的值来源于监听方法的返回值
把两个输入框的值合并，用{{flName}}渲染出来
<div id="app">
姓：<input type="text" v-model="fName">
名：<input type="text" v-model="lName">
姓名：<b>{{ flName }}</b>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
fName: '',
lName: '',
},
computed: {
flName(){
// this.fName和this.lName有值发送改变，该方法都会被调用
// 变量flName的值是由函数的返回值决定
return this.fName + this.lName;
}
}
})
</script>
3.监听实例 watch
// 1) watch为data中已存在的属性设置监听事件
// 2) 监听的属性值发送改变，就会触发监听事件
// 3) 监听事件的方法返回值没有任何意义
监听一个值，然后拆成两份
<div id="app">
姓名：<input type="text" v-model="fullName">
姓：<b>{{ firstName }}</b>
名：<b>{{ lastName }}</b>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
fullName: '',
firstName: '',
lastName: '',
},
watch: {
// fullName值改变，就会调用绑定的事件方法
fullName() {
nameArr = this.fullName.split(''); //拆分
this.firstName = nameArr[0];
this.lastName = nameArr[1];
}
}
})
</script>
组件
// 1) 组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用
// 2) 分组分为根组件、全局组件与局部组件
// 根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件
// 全局组件：不用注册，就可以成为任何一个组件的子组件
// 局部组件：必须注册，才可以成为注册该局部组件的子组件
// 3) 每一个组件都有自身的html结构，css样式，js逻辑
// 每一个组件其实都有自己的template，就是用来标识自己html结构的
// template模板中有且只有一个根标签
// 根组件一般不提供template，就由挂载点的真实DOM提供html结构
// 4) 除根组件的其他组件，数据要有局部作用域，保证组件复用时，各组件间数据的独立性
// 5) 在多组件共处时，在哪个组件模板中出现的变量，有当前组件组件提供
1、局部组件
// 1) 创建局部组件
// 2) 在父组件中注册该局部组件 根组件称为父组件
// 3) 在父组件的template模板中渲染该局部组件
<style>
.box {
box-shadow: 0 3px 5px 0 #666;
width: 240px;
height: 300px;
text-align: center;
padding: 20px 0;
float: left;
margin: 5px;
}
.box img {
width: 200px;
}
</style>
<div id="app">
<!--<mcc></mcc>-->
//3.在父组件模板中渲染局部组件
<local-tag></local-tag>
<local-tag></local-tag>
</div>
<script src="js/vue.js"></script>
<script> //1.创建局部组件
let localTag = {
template: `
<div class="box">
<img src="img/666.jpg" alt="">
<h3>凤哥</h3>
<p>马叉虫❤马叉虫</p>
</div>
`
}; new Vue({
el: '#app',
components: { //2.在父组件中注册局部组件
// mcc: localTag,
// localTag,
'local-tag': localTag,
}
})
</script>
2.全局组件
// 1) 创建全局组件
// 2) 在父组件的template模板中直接渲染该全局组件
<style>
.box {
box-shadow: 0 3px 5px 0 #666;
width: 240px;
height: 300px;
text-align: center;
padding: 20px 0;
float: left;
margin: 5px;
}
.box img {
width: 200px;
}
</style>
<div id="app">
//2.父组件模板渲染全局组件
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
</div>
<script src="js/vue.js"></script>
<script>
//1.注册全局组件
Vue.component('global-tag', {
template: `
<div class="box" @click="action">
<img src="img/666.jpg" alt="">
<h3>凤哥</h3>
<p>马叉虫❤{{ num }}</p>
</div>
`,
data () {
return {
num: 0
}
},
methods: {
action() {
this.num++;
}
}
}); new Vue({
el: '#app',
})
</script>
3、组件交互-父传子（父组件提供数据）
// 数据交互 - 父传子 - 通过绑定属性的方式
// 1) 父组件提供数据
// 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供
// 3) 在子组件实例中，通过props实例成员获得自定义属性
使用父组件的数据，在子组件的模板上进行渲染。
1.先创建局部组件 2.在父组件中注册局部组件（components）3.在父组件模板中渲染出局部组件，为子组件标签设置自定义属性，自定义属性的值由父组件提供 4.在子组件实例中，通过props实例成员获得自定义属性
<style>
.info {
text-align: center;
width: 200px;
padding: 3px;
box-shadow: 0 3px 5px 0 pink;
float: left;
margin: 5px;
}
.info img {
width: 200px;
}
</style>
<div id="app">
<!-- 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供 -->
<info v-for="info in infos" :key="info.image" :myinfo="info"></info>
</div>
<script src="js/vue.js"></script>
<script>
let infos = [
{
image: 'img/001.png',
title: '小猫'
},
{
image: 'img/002.png',
title: '蛋糕'
},
{
image: 'img/003.png',
title: '蓝糕'
},
{
image: 'img/004.png',
title: '恶犬'
},
];
//局部组件
let info = {
template: `
<div class="info">
<img :src="myinfo.image" alt="">
<p><b>{{ myinfo.title }}</b></p>
</div>
`,
// 3) 在子组件实例中，通过props实例成员获得自定义属性
props: ['myinfo']
};
//父组件
new Vue({
el: '#app',
components: {
info,
},
data: {
infos, // 1) 父组件提供数据
}
})
</script>
4、组件交互-子传父 （子组件传递数据）
// 组件交互-子传父
// 1) 数据由子组件提供
// 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来
// 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数
<style>
.close:hover {
cursor: pointer;
color: red;
}
</style>
<div id="app">
<p>
<input type="text" v-model="userMsg">
<button @click="sendMsg">留言</button>
</p>
<ul>
<!-- 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来 -->
<msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
let msgLi = {
template: `
<li>
<span class="close" @click="deleteMsg(index)">x </span>
<span>第{{ index + 1 }}条：</span>
<span>{{ msg }}</span>
</li>
`,
props: ['msg', 'index'],
methods: {
// 最先触发系统的click事件
deleteMsg(i) {
// 1) 数据由子组件提供
// $emit('自定义事件名', 参数们)
this.$emit('remove_msg', i);
}
}
};
new Vue({
el: '#app',
data: {
msgs: [],
userMsg: ''
},
methods: {
sendMsg() {
if (this.userMsg) {
this.msgs.push(this.userMsg);
this.userMsg = "";
}
},
// 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数
removeAction(i) {
this.msgs.splice(i, 1)
}
},
components: {
msgLi
}
})
</script>