---恢复内容开始---
v-once指令
v-once：单独使用，限制的标签内容一旦赋值，便不可被动修改，也就失去了被动双向绑定的特性，如果是输入框，可以主动手动修改
示例:
<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> <script src="js/vue.js">script> <script> new Vue({ el: '#app', data: { msg: '初始值' } }) script>
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>
条件指令v-show，v-if
两种都是可以控制标签的显隐，绑定的都是布尔值，当标签被隐藏是，
v-if是不渲染标签，v-show则是通过display:none来进行渲染，这样的话v-show就不怎么安全，所以一般都不用v-show，都是应用v-if
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>title>
<style>
.box {
width: 400px;
height: 300px;
}
.r { background-color: red; }
.y { background-color: yellow }
.b { background-color: blue; }
.active {
background-color: pink;
}
style>
head>
<body>
<div id="app">
<div class="em">
<p>
<button @click="changeBox('rBox')" :class="{active: showName == 'rBox'}">红button>
<button @click="changeBox('yBox')" :class="{active: showName == 'yBox'}">黄button>
<button @click="changeBox('bBox')" :class="{active: showName == 'bBox'}">蓝button>
p>
<p>
<button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'active' : ''">红button>
<button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'active' : ''">黄button>
<button @click="changeBox('bBox')" :class="showName == 'bBox' ? 'active' : ''">蓝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="vue/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
showName: 'rBox'
},
methods: {
changeBox(name) {
this.showName = name;
}
}
})
script>
html>
v-pre原义指令（了解）
就是保持原义，在vue控制内，形成局部不受vue控制区域，就是不解析vue语法
<div id="app"> <p>{{ msg }}p> <p v-pre> {{ }} <span v-if="hehe">span> p> div> <script src="js/vue.js">script> <script> new Vue({ el: '#app', data: { msg: 'message' } }) script>
补充：:key=’唯一的变量值‘ 用于存储内存，方便加速渲染的
循环指令
语法就是v-for: 元素 in 容器,要注意在循环字典的时候，首先循环出来的是value值，其实key，再其次是索引，字典的key是有序的方便查找，value值是无序的方便存储。
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) 遍历对象：可以只逐一遍历成员元素，也可以连同遍历成员键(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"> <p>{{ str }}p> <p>{{ str[0] }}p> <div> <span v-for="ch in str">{{ ch }}span> div> <div> <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> 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永久保存数据
sessionStorage临时保存数据(当所属页面标签被关闭，数据被清空)
3) 前台localStorage 和 sessionStorage数据库存储的值是字符串类型，所以要存放arr、dic等复杂数据需要JSON参与
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">
<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>
<script>
// localStorage['num'] = 10;
// sessionStorage.num = 888;
// console.log(localStorage.num);
// localStorage.msgs = JSON.stringify(['1111', '2222']);
// console.log(JSON.parse(localStorage.msgs));
// console.log(JSON.parse(localStorage.msgs)[0]);
script>
html>
delimiters修改插值表达式符号(了解)
<div id="app"> {{ msg }} {[ msg ]} div> <script> new Vue({ el: '#app', data: { msg: '12345' }, // delimiters: ['{{', '}}'], delimiters: ['{[', ']}'], }) script> 主要就是防止和django的模版语法{{ }}冲突，就像数据库修改结束符一样，delimiters，但数据库的只在当前窗口有效关了就无效了
计算属性computed(监听)
computed是用来声明方法属性的
声明的方法属性不能在data中重复使用
方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听
计算属性的值来源于监听方法的返回值
<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>
监听属性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>
组件
是一个包含html，css，js的独立集合体，这样的集合体可以完成页面解构的代码复用。
组件分为根组件，全局组件，局部组件
根组件：由new Vue 产生的组件，一个项目只会有一个根组件
全局组件：无需注册，可以成为任何组件的子组件
局部组件：必须注册，才能够成为任何组件的子组件。
每一个组件都有自己的html结构，css样式，js逻辑
每个组件其实都有自己的template,用来标识自己的html结构
每个template都有且唯一一个根标签
根组件一般不提供template，就由挂载点的真实DOM提供html结构
// 4) 除根组件的其他组件，数据要有局部作用域，保证组件复用时，各组件间数据的独立性
// 5) 在多组件共处时，在哪个组件模板中出现的变量，有当前组件组件提供
局部组件
// 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"> <local-tag>local-tag> <local-tag>local-tag> div> <script src="js/vue.js">script> <script> let localTag = { template: ` <div class="box"> <img src="img/666.jpg" alt=""> <h3>凤哥</h3> <p>马叉虫❤马叉虫</p> </div> ` }; new Vue({ el: '#app', components: { // mcc: localTag, // localTag, 'local-tag': localTag, } }) script>
全局组件
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"> <global-tag>global-tag> <global-tag>global-tag> <global-tag>global-tag> div> <script src="js/vue.js">script> <script> 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++; } } }); // 数据局部化分析导入 // a = function () { // return {num: 10} // }; // b1 = a(); // b2 = a(); // b3 = a(); // 这样处理b1，b2，b3的数据就彼此独立的，但是都来源于a new Vue({ el: '#app', }) script>
组件交互-父传子
// 数据交互 - 父传子 - 通过绑定属性的方式
// 1) 父组件提供数据
// 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供
// 3) 在子组件实例中，通过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"> <info v-for="info in infos" :key="info.image" :myinfo="info">info> div> <script src="js/vue.js">script> <script> // 伪代码：模拟数据从后台请求 /* let infos = ''; document.onload = function () { $.ajax({ url: '/images/', type: 'get', success (response) { infos = response.data } }) }; */ 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>
<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"> <info v-for="info in infos" :key="info.image" :myinfo="info">info> div> <script src="js/vue.js">script> <script> // 伪代码：模拟数据从后台请求 /* let infos = ''; document.onload = function () { $.ajax({ url: '/images/', type: 'get', success (response) { infos = response.data } }) }; */ 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>
// 组件交互-子传父
// 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> <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>