Vue.js基础
Vue.js
https://v2.cn.vuejs.org/https://cn.vuejs.org/
初识Vue
官网：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
初始Vue
1.想让vue工作，就必须创建一个vue实例， 且要传入一个配置对象
2.root 容器里的代码依然符合 html 规范， 只不过混入了一些特殊的Vue语法
3.root 容器里的代码被称为 Vue模板
4.Vue 实例和容器是一一对应的；
5.真实开发中只有一个Vue实例， 并且会配合着组件一起使用
6.{{XXX}}中 XXX要写js表达式，且XXX可以自动读取到data中的所有属性
7.一旦data 中数据发生改变，那么页面中用到该数据得地方也会自动更新
注意区分： js表达式 和 js 代码（语句）
1.表达式：一个表达式会生成一个值，可以放任何一个需要值得地方：
(1)a
(2)a+b
(3)demo(1)
(4)x === y ? a : b
2.js 语句
(1)if(){}
(2)for(){}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head>
<body><!-- 准备好一个容器 --><div id="root"><!-- 插值语法 --><h1>hello, {{name.toUpperCase()}}, {{address}}</h1></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示//创建Vue 实例const x = new Vue({el:"#root", //el 用于指定当前Vue实例为哪个容器服务， 值通常为css选择器字符串// el:document.getElementById('root')data:{ //data用于存储数据， 数据供el所指定的容器去使用， 值我们暂时先写成一个对象name:'jack',address:'beijing'}})</script>
</body>
</html>
模板语法
Vue模板语法有2大类
1.插值语法:
功能:用于解析标签体内容。
写法:{{xxx}}，xxx是js表达式,且可以直接读取到data中的所有属性。
2.指令语法:
功能:用于解析标签（包括:标签属性、标签体内容、绑定事件…）。
举例: v-bind :href="xxx”或简写为:href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注:Vue中有很多的指令，且形式都是: v-???，此处我们只是拿v-bind举个例子。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body> <div id="root"><h1>插值语法</h1><h3>你好，{{name}}</h3><hr/><h1>指令语法</h1><a v-bind:href="url">{{name}}一下</a> <a :href="school.url.toUpperCase()">{{school.name}}一下</a></div><script>Vue.config.productionTip = falsenew Vue({el:'#root',data:{name:'百度',url:'http://www.baidu.com',school:{name:'淘宝',url: 'http://www.taobao.com',}}})</script>
</body>
</html>
数据绑定
Vue中有2种数据绑定的方式
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
备注:
1.双向绑定一般都应用在表单类元素上（如: input、select等)
2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><!-- 准备好一个容器 --><div id="root"><!-- 普通写法 --><!-- 单向数据绑定：<input type="text" v-bind:value = "name"><br> --><!-- 双向数据绑定：<input type="text" v-model:value="name"> --><!-- v-model 只能应用在表单元素（输入类元素）上 --><!-- 简写 -->单向数据绑定：<input type="text" :value="name"><br>双向数据绑定：<input type="text" v-model="name"></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{name:'huyq',}})</script>
</body></html>
MVVM模型
MVVM模型
1.M:模型(Model)data中的数据
2.V:视图(View):模板代码
3.VM:视图模型(ViewModel):Vue实例
data中所有的属性,最后都出现在了vm身上。
vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。
事件处理
事件的基本使用
1.使用v-on :xxx或@xxx绑定事件，其中xxx是事件名;
2.事件的回调需要配置在methods对象中，最终会在vm上;
3.methods中配置的函数,不要用箭头函数! 否则this就不是vm了;
4.methods中配置的函数，都是被Vue所管理的函数。
this的指向是vm或组件实例对象5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><!-- 准备好一个容器 --><div id="root"><h2>欢迎来到{{name}}学习</h2><button v-on:click = "showInfo1">点我提示信息(不传参)</button><!-- 简写形式 --><button @click="showInfo2(66, $event)">点我提示信息(传参)</button> </div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {name: '哈佛大学',},methods:{showInfo1(event) {// console.log(event.target.innerText); //点我提示信息(不传参)// console.log(this); //此处的this是vmalert('同学你好!')},showInfo2(number){console.log(number, event); //66alert('同学你好!!')}}})</script>
</body></html>
事件修饰符
vue中的事件修饰符:
1.prevent: 阻止默认事件（常用）;
2.stop:阻止事件冒泡（常用）;
3.once:事件只触发一次（常用）;
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a><!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
键盘事件
1.Vue中常用的按键别名:
回车 => enter
删除 => delete(捕获删除”和"退格”键)
退出 => esc
空格 => space
换行 => tab (特殊， 必须配合keydown使用)
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键，可以使用按健原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3.系统修饰键（用法特殊）:ctrl、alt、 shift、 meta
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐)
5.Vue.config.keyCodes.自定义健名=键码，可以去定制按键别名
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">计算属性
计算属性:
1.定义:要用的属性不存在,要通过已有属性计算得来。
2.原理:底层借助了0bjcet.defineproperty方法提供的getter和setter.
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比，内部有缓存机制（复用）,效率更高,调试方便。
5.备注:
1.计算属性最终会出现在vm上,直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
<body><!-- 准备好一个容器 --><div id="root">姓：<input type="text" v-model="firstName"><br><br>名：<input type="text" v-model="lastName"><br><br>姓名：<span>{{fullName}}</span></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {firstName: '张',lastName:'三',},computed:{// 计算属性fullName: {// get作用：当有人读取fullname时，get就会被调用，且返回值就是fullname的值//get 什么时候调用， 1.初次读取fullName, 2.所依赖的数据发生变化时get(){console.log('get 被调用了');return this.firstName + '-' + this.lastName},//当 fullName 被修改时，set调用set(value){console.log('set 被调用了');console.log(value);const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}}})</script>
</body>计算属性简写
<body><!-- 准备好一个容器 --><div id="root">姓：<input type="text" v-model:value="firstName"><br><br>名：<input type="text" v-model="lastName"><br><br>姓名：<span>{{fullName}}</span></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {firstName: '张',lastName:'三',},computed:{// 简写//只考虑读取,不考虑修改fullName(){console.log('get 被调用了');return this.firstName + '-' + this.lastName}}})</script>
</body>监听属性
监视属性watch
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在，才能进行监视!!
3.监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
<body> <!-- 准备好一个容器 --><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {isHot: true,},//计算属性computed:{info(){return this.isHot ? '热' : '冷'}},methods: {changeWeather(){this.isHot = !this.isHot}},//监视属性// watch:{// isHot :{// immediate: true, //初始化时， 让handler调用一下// // handler什么时候调用？当isHot发生改变时。handler调用// handler(newValue, oldValue){// console.log('isHot 被修改了', newValue, oldValue);// },// }// }})vm.$watch('isHot', {immediate: true, //初始化时， 让handler调用一下// handler什么时候调用？当isHot发生改变时。handler调用handler(newValue, oldValue){console.log('isHot 被修改了', newValue, oldValue);},})</script>
</body>深度监视
深度监视:
(1). vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变。
备注:
(1).vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构,决定是否采用深度监视。
<body><!-- 准备好一个容器 --><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button><h3>a的值是{{numbers.a}}</h3><button @click="add">点我让a+1</button><h3>b的值是{{numbers.b}}</h3><button @click="numbers.b++">点我让b+1</button></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {isHot: true,numbers:{a:1,b:1,}},//计算属性computed:{info(){return this.isHot ? '热' : '冷'}},methods: {changeWeather(){this.isHot = !this.isHot},add(){this.numbers.a++}},// 监视属性watch:{isHot :{immediate: true, //初始化时， 让handler调用一下// handler什么时候调用？当isHot发生改变时。handler调用handler(newValue, oldValue){console.log('isHot 被修改了', newValue, oldValue); },},//监视多级结构中所有属性的变化numbers:{deep:true,//深度监视handler(){console.log('numbers改变了');}}}})</script>
</body>
监视属性简写
<body> <!-- 准备好一个容器 --><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {isHot: true,numbers:{a:1,b:1,}},//计算属性computed:{info(){return this.isHot ? '热' : '冷'}},methods: {changeWeather(){this.isHot = !this.isHot},},// 监视属性watch:{//简写isHot(newValue, oldValue){console.log('isHot 被修改了', newValue, oldValue);},}})</script>
</body>
绑定样式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>绑定样式</title><style>.basic{width: 300px;height: 200px;border: 1px solid black;}.happy{background-color: pink;}.sad {background-color: gray;}.normal{background-color: skyblue;}.w1{background-color: green;}.w2{font-size: 30px;}.w3{border-radius: 10px;}</style>
</head><body><!-- 绑定样式:1.class样式写法:class="xxx"xXx可以是字符串、对象、数组。字符串写法适用于:类名不确定,要动态获取。对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用.2. style样式:style="{fontsize: xxx}"其中xxx是动态值。: style="[a,b]"其中a、b是样式对象。 --><!-- 准备好一个容器 --><div id="root"><!-- 绑定class样式--字符串写法， 适用于：样式类名不确定，需要动态指定 --><div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><br><!-- 绑定class样式--数组写法， 适用于：要绑定的样式个数不确定，名字不确定 --><div class="basic" :class="classArr">{{name}}</div><br><br><!-- 绑定class样式--对象写法， 适用于：要绑定的样式个数不确定，名字不确定 但要动态决定用不用--><div class="basic" :class="classObj">{{name}}</div><br><br><!-- 绑定class样式--对象写法 --><!-- <div class="basic" :style="{fontSize: fsize + 'px'}">{{name}}</div> --><div class="basic" :style="styleObj">{{name}}</div><br><br><!-- 绑定class样式--数组写法 --><div class="basic" :style="styleArr">{{name}}</div><br><br></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {name: '尚硅谷',mood: 'normal',classArr:['w1','w2','w3'],classObj:{w1:false,w2:false,w3:true,},// fsize:40,styleObj:{fontSize:'40px',color: 'red',backgroundColor : 'orange',},styleArr:[{fontSize: '50px',color: 'red',},{backgroundColor: 'blue',},]},methods: {changeMood(){const arr = ['happy', 'sad', 'normal']let i = Math.floor(Math.random() * 3)this.mood = arr[i]}},})</script>
</body></html>
条件渲染
条件渲染:
1.v-if
写法:
(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else="表达式”适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被打断”。
2.v-show
写法: v-show=“表达式”
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
3.备注:使用v-if的时,元素可能无法获取到，而使用v-show一定可以获取到。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><!-- 准备好一个容器 --><div id="root"><!-- 使用v-show做条件渲染 --><h2 v-show="a">欢迎来到{{name}}</h2><!-- 使用v-if做条件渲染 --><h2 v-if="a">欢迎来到{{name}}</h2><h2>当前 n 的值是{{n}}</h2><button @click="n++">点我 n 加 1</button><div v-show="n === 1 ? true : false">Angular</div><div v-show="n === 2 ? true : false">React</div><div v-show="n === 3 ? true : false">Vue</div> <div v-if="n === 1 ">Angular</div><div v-else-if="n === 2 ">React</div><div v-else-if="n === 3 ">Vue</div><div v-else>哈哈</div><div v-show="n === 1">你</div><div v-show="n === 1">好</div><div v-show="n === 1">啊</div><template v-if=" n === 1"><div >你</div><div >好</div><div >啊</div></template></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {name: '安徽',// a:false,n:0},})</script>
</body></html>
列表渲染
基本列表
v-for指令:
1.用于展示列表数据
2.语法: v-for=“(item,index) in xxx” :key=“yyy”
3.可遍历:数组、对象、字符串（用的很少）、指定次数（用的很少)
<body><!-- 准备好一个容器 --><div id="root"><!-- 遍历数组 --><h2>人员列表</h2><ul><!-- <li v-for="p in persons" :key="p.id">{{p.name + '-' + p.age}}</li> --><li v-for="(p, index) in persons" :key="index">{{p.name + '-' + p.age}}</li> </ul><!-- 遍历对象 --><h2>汽车信息</h2><ul><li v-for="(value, k) of car" :key="k">{{k}} --- {{value}}</li></ul><!-- 遍历字符串 --><h2>汽车信息</h2><ul><li v-for="(char, index) of string" :key="index">{{index}} --- {{char}}</li></ul><!-- 遍历指定次数 --><h2>汽车信息</h2><ul><li v-for="(number, index) of 5" :key="index">{{index}}--- {{number}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {persons:[{ id: '001', name: '张三', age: 18 },{ id: '002', name: '李四', age: 13 },{ id: '003', name: '王五', age: 19 },],car:{name:'audi',price:'70w',color:'黑色',},string : 'hello world',},})</script>
</body>列表的过滤
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>列表的过滤</title>
</head><body><!-- 准备好一个容器 --><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><ul><li v-for="(p, index) in filPersons" :key="p.id">{{p.name + '-' + p.age + '-' + p.sex}}</li> </ul></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示//computed 实现const vm = new Vue({el: '#root',data: {keyWord: '',persons: [{ id: '001', name: '马冬梅', age: 18, sex: '女' },{ id: '002', name: '周冬雨', age: 13, sex: '女' },{ id: '003', name: '周杰伦', age: 19, sex: '男' },{ id: '004', name: '曾汪伦', age: 20, sex: '男' },],},computed:{//数字的过滤方法filPersons(){return this.persons.filter((p) => {return p.name.indexOf(this.keyWord) !== -1})}}})</script>
</body></html>
列表的排序
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>列表的排序</title>
</head><body><!-- 准备好一个容器 --><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><button @click="sortType = 2">升序</button><button @click="sortType = 1">降序</button><button @click="sortType = 0">原顺序</button><ul><li v-for="(p, index) in filPersons" :key="p.id">{{p.name + '-' + p.age + '-' + p.sex}}</li> </ul></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示//computed 实现const vm = new Vue({el: '#root',data: {keyWord: '',sortType: 0, //0 原顺序 2 升序 1 降序persons: [{ id: '001', name: '马冬梅', age: 18, sex: '女' },{ id: '002', name: '周冬雨', age: 13, sex: '女' },{ id: '003', name: '周杰伦', age: 19, sex: '男' },{ id: '004', name: '曾汪伦', age: 20, sex: '男' },],},computed:{filPersons(){const arr = this.persons.filter((p) => {return p.name.indexOf(this.keyWord) !== -1})//判断是否需要排序if(this.sortType){arr.sort((p1 , p2) => {return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age})}return arr}}})</script>
</body></html>
表单数据的收集
若:，则v-model收集的是value值，用户输入的就是value值
若:，则v-model收集的是value值，且要给标签配置value值。
若:
1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值)
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值)
(2)v-model的初始值是数组,那么收集的的就是value组成的数组
备注:v-model的三个修饰符:
lazy: 失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><!-- 准备好一个容器 --><div id="root"><form @submit.prevent="demo"><label for="demo">账号：</label><input type="text" id="demo" v-model.trim="userInfo.account"><br><br><label for="pwd">密码：</label><input type="password" id="pwd" v-model="userInfo.password"><br><br><label for="age">年龄：</label><input type="number" id="age" v-model.number="userInfo.age"><br><br>性别：男<input type="radio" name="sex" value="male" v-model="userInfo.sex"> 女<input type="radio" name="sex" value="female" v-model="userInfo.sex"><br><br>爱好：吃饭<input type="checkbox" name="hobbby" value="eatting" v-model="userInfo.hobby">睡觉<input type="checkbox" name="hobbby" value="sleeping" v-model="userInfo.hobby">打豆豆<input type="checkbox" name="hobbby" value="hitting" v-model="userInfo.hobby"><br><br>所属校区：<select v-model="userInfo.city"><option value="">请选择校区</option><option value="beijing">北京</option><option value="anhui">安徽</option><option value="zhejiang">浙江</option><option value="jiangsu">江苏</option><option value="fujian">福建</option></select><br><br>其他信息：<textarea name="" id="" v-model.lazy="userInfo.other"></textarea><br><br><input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com" style="text-decoration: none;">《用户协议》</a><br><br><button>提交</button></form></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {userInfo:{account: '',password: '',age:'',sex: 'female',hobby: [],city: '',other: '',agree: '',}},methods: {demo(){console.log(JSON.stringify(this.userInfo));}},})</script>
</body></html>
过滤器
过滤器:
定义:对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法:
1.注册过滤器:Vue.filter(name,callback)或new Vue{filters:{}
2.使用过滤器:{{ xxx│过滤器名}}或v-bind:属性=“xxx|过滤器名"
备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据,是产生新的对应的数据
<body><!-- 准备好一个容器 --><div id="root"><h2>显示格式化后的时间</h2><!-- 计算属性实现 --><h3>现在是{{fmTime}}</h3><!-- methods实现 --><h3>现在是{{getFmtTime()}}</h3><!-- 过滤器实现 --><h3>现在是{{time | timeFormater}}</h3><!-- 过滤器实现 (传参)--><h3>现在是{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3><h3 :x="msg | mySlice">world</h3></div><div id="root2"><h2>{{msg | mySlice}}</h2></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示//全局过滤器Vue.filter('mySlice', function (value) {return value.slice(0,4)})new Vue({el: '#root',data: {time: 1723081550375,msg:'hello, world',},computed:{fmTime(){return dayjs(this.time).format('YYYY年-MM月-DD日 HH:mm:ss')}},methods:{getFmtTime(){return dayjs(this.time).format('YYYY年-MM月-DD日 HH:mm:ss')}},//局部过滤器filters:{timeFormater(value, str='YYYY年-MM月-DD日 HH:mm:ss'){return dayjs(value).format(str)},// mySlice(value){// return value.slice(0,4)// }}})new Vue({el:'#root2',data:{msg: 'hello,world',}})</script>
</body></html>
内置指令
v-text指令
<body><!-- 准备好一个容器 --><div id="root"><div>{{name}}</div><div v-text="name"></div></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {name: 'hello',},})</script>
</body>
v-html指令
<body><!-- 准备好一个容器 --><div id="root"><div>{{name}}</div><div v-html="str"></div></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {name: 'hello',str:' <h3>你好</h3>'},})</script>
</body>
v-once指令
<body><!-- v-once指令:1.v-once所在节点在初次动态渲染后，就视为静态内容了。2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。--><!-- 准备好一个容器 --><div id="root"><h2 v-once>初始化的n值是{{n}}</h2><h2>当前的n值是{{n}}</h2><button @click="n++">点我n+1</button></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {n:1,},})</script>
</body>
v-pre指令
<body><!-- V-pre指令:1.跳过其所在节点的编译过程。2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。--><!-- 准备好一个容器 --><div id="root"><h2 v-pre>hello world</h2><h2 v-pre>当前的n值是{{n}}</h2><button @click="n++">点我n+1</button></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {n: 1,},})</script>
</body>v-cloak指令
<div id="app" v-cloak> {{ message }}
</div>
当 Vue 实例开始编译时，它会移除所有元素的 v-cloak 属性。因此，一旦 Vue 完成编译，[v-cloak] 选择器将不再匹配任何元素，这些元素将变得可见。这确保了用户不会看到未编译的模板。
自定义指令
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><!-- 需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点 --><!-- 准备好一个容器 --><div id="root"><h2>当前值是: <span v-text="n"></span></h2><h2>放大10倍后n的值是: <span v-big="n"></span></h2><button @click="n++">点我n加1</button><hr><input type="text" v-bind:value="n"><br><br><input type="text" v-fbind:value="n"></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {n: 1,},directives:{//big函数何时会被调用？// 1， 指令与元素成功绑定时// 2, 指令所在的模板被重新解析时big(element, binding){//element => <span> </span>//binding.value => nelement.innerText = binding.value * 10},fbind:{//指令与元素成功绑定时调用bind(element, binding){element.value = binding.value},// 指令所在元素被插入页面时inserted(element, binding){element.focus()},// 指令所在的模板被重新解析时update(element, binding){element.value = binding.value}}}})</script>
</body></html>
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
生命周期
引出生命周期
生命周期:
1.又名:生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm或组件实例对象。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><div id="root"><h2 v-if="a">你好啊</h2><h2 :style="{opacity:opacity}">hello, world</h2></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {a:false,opacity:1,},methods: {// change() {// setInterval(() => {// this.opacity -= 0.01// if (this.opacity <= 0) { this.opacity = 1 }// }, 16);// }},// Vue完成模板的解析并把真实的DOM元素放入页面后（挂在完毕），调用mountdmounted() {setInterval(() => {this.opacity -= 0.01if (this.opacity <= 0) { this.opacity = 1 }}, 16);setTimeout(() => {this.a = true}, 2000);},})//通过外部的定时器实现， 不推荐// setInterval(() => {// vm.opacity -= 0.01// if(vm.opacity <= 0) {vm.opacity = 1}// }, 16);</script>
</body></html>
分析生命周期
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><!-- 准备好一个容器 --><div id="root"></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',template:` <div><h2>当前值是: <span v-text="n"></span></h2><button @click="add">点我n加1</button><button @click="bye">点我销毁vm</button></div>`,data: {n:1,},methods: {add(){this.n++},bye(){this.$destroy()console.log('销毁');}},watch:{n(){console.log('n 变了');}},// 挂载流程beforeCreate() {//初始化：生命周期、事件、但数据代理还未开始，//此时无法通过vm访问到data中的数据，methods中的方法console.log('beforeCreate');// console.log(this);},created() {//初始化：数据监测、数据代理//此时可以通过vm访问到data中的数据，methods中的配置方法console.log('created');// console.log(this);},// vm.$mount(#root)beforeMount() {//此时页面呈现的是未经过Vue编译的DOM结构，所有的Dom的操作最终都不奏效console.log('mount');// console.log(this);},mounted() {//此时，页面中呈现的是经过Vue编译的DOM， 对dom的操作均有效// 一般在此进行： 开启定时器，发送网络请求， 订阅消息， 绑定自定义事件等初始化操作// console.log('mounted', this.$el);console.log('mounted')},// 更新流程beforeUpdate() {//此时，数据是新的，但页面是旧的console.log('beforeUpdate');// console.log(this.n);},updated() {//此时数据是新的，页面也是新的console.log('Updated');// console.log(this.n);},beforeDestroy() {// 此时vm中所有的data， methods、指令等等，都处于可用状态//马上要执行销毁过程//一般此阶段，关闭定时器，取消订阅消息、解绑自定义事件等收尾工作console.log('beforeDestroy');},destroyed() {console.log('destroyed');},})</script>
</body></html>
总结生命周期
常用的生命周期钩子:
1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效,但原生DOM事件依然有效。
3.一般不会再beforeDestroy操作数据,因为即便操作数据，也不会再触发更新流程了。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><div id="root"><h2 v-if="a">你好啊</h2><h2 :style="{opacity:opacity}">hello, world</h2><button @click="stop">点我停止变换</button><button @click="opacity = 1">点我透明度变 1</button></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {a: false,opacity: 1,timer:0,},methods: {stop(){this.$destroy()}},// Vue完成模板的解析并把真实的DOM元素放入页面后（挂在完毕），调用mountdmounted() {this.timer = setInterval(() => {this.opacity -= 0.01if (this.opacity <= 0) { this.opacity = 1 }}, 16);setTimeout(() => {this.a = true}, 8000);},beforeDestroy() {clearInterval(this.timer)},})</script>
</body></html>
浏览器本地存储
localStorage
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>localStorage</title></head><body><h2>localStorage</h2><button onclick="saveData()">点我保存一个数据</button><button onclick="readData()">点我读取一个数据</button><button onclick="deleteData()">点我删除一个数据</button><button onclick="deleteAllData()">点我清空数据</button><script>let p = { name: "jack", age: 18 };function saveData() {window.localStorage.setItem("msg", "hello");window.localStorage.setItem("person", JSON.stringify(p));}function readData() {const result = localStorage.getItem("person");console.log(JSON.parse(result));}function deleteData() {localStorage.removeItem("msg");}function deleteAllData() {localStorage.clear();}</script></body>
</html>sessionStorage
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>sessionStorage</title></head><body><h2>sessionStorage</h2><button onclick="saveData()">点我保存一个数据</button><button onclick="readData()">点我读取一个数据</button><button onclick="deleteData()">点我删除一个数据</button><button onclick="deleteAllData()">点我清空数据</button><script>let p = { name: "jack", age: 18 };function saveData() {window.sessionStorage.setItem("msg", "hello");window.sessionStorage.setItem("person", JSON.stringify(p));}function readData() {const result = sessionStorage.getItem("person");console.log(JSON.parse(result));}function deleteData() {sessionStorage.removeItem("msg");}function deleteAllData() {sessionStorage.clear();}</script></body>
</html>l
localStorage
点我保存一个数据<button onclick="readData()">点我读取一个数据</button><button onclick="deleteData()">点我删除一个数据</button><button onclick="deleteAllData()">点我清空数据</button><script>let p = { name: "jack", age: 18 };function saveData() {window.localStorage.setItem("msg", "hello");window.localStorage.setItem("person", JSON.stringify(p));}function readData() {const result = localStorage.getItem("person");console.log(JSON.parse(result));}function deleteData() {localStorage.removeItem("msg");}function deleteAllData() {localStorage.clear();}
</script>
## sessionStorage```html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>sessionStorage</title></head><body><h2>sessionStorage</h2><button onclick="saveData()">点我保存一个数据</button><button onclick="readData()">点我读取一个数据</button><button onclick="deleteData()">点我删除一个数据</button><button onclick="deleteAllData()">点我清空数据</button><script>let p = { name: "jack", age: 18 };function saveData() {window.sessionStorage.setItem("msg", "hello");window.sessionStorage.setItem("person", JSON.stringify(p));}function readData() {const result = sessionStorage.getItem("person");console.log(JSON.parse(result));}function deleteData() {sessionStorage.removeItem("msg");}function deleteAllData() {sessionStorage.clear();}</script></body>
</html>相关文章：
Vue.js基础
Vue.js https://v2.cn.vuejs.org/https://cn.vuejs.org/初识Vue 官网：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层…...
罐区紧急切断阀安装位置规范
在化工生产与储存的复杂环境中，罐区紧急切断阀的安装位置规范不仅是保障生产安全的关键一环，更是预防重大事故、减少损失的有效手段。在深入理解了罐区布局、物料特性及潜在风险后，对于紧急切断阀的安装位置，我们应遵循以下更为细…...
JavaScript 中的事件模型
JavaScript 中的事件模型是浏览器如何处理用户交互（如点击、键盘输入、鼠标移动等）或其他事件（如加载完成、定时器等）的机制。理解事件模型有助于我们处理这些事件并响应它们。JavaScript 的事件模型主要包括以下几个部分…...
理解Java引用数据类型（数组、String）传参机制的一个例子
目录 理解Java引用数据类型（数组、String）传参机制的一个例子理解样例代码输出 参考资料 理解Java引用数据类型（数组、String）传参机制的一个例子 理解 引用数据类型传递的是地址。用引用类型A给引用类型B赋值，相当于…...
【计算机组成原理】实验一：运算器输入锁存器数据写实验
目录 实验要求 实验目的 主要集成电路芯片及其逻辑功能 实验原理 实验内容及步骤 实验内容 思考题 实验要求 利用CP226实验箱上的K16～K23二进制拨动开关作为DBUS数据输入端，其它开关作为控制信号的输入端，将通过K16～K23设定…...
LSI SAS 9361-8i和SAS3008 12 gb / s PCIe 3.0 RAID 阵列卡配置
LSI SAS 9361-8i和SAS3008 12 gb / s PCIe 3.0 RAID 阵列卡配置 开机，BIOS自检，可以看到设备硬盘信息，以及提示CtrlR进入Raid卡配置界面。 按CtrlR进入Raid卡配置界面，一般来说使用CtrlR进入Raid卡配置界面的Raid卡配置都通用。 …...
node js版本低导致冲突WARN EBADENGINE package: required: { node: ‘＞=18‘ }
重新安装依赖包 1、删除旧的 node_modules 目录和 package-lock.json 文件： rm -rf node_modules rm package-lock.json2、升级node版本 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bashexport NVM_DIR"$([ -z "${…...
828华为云征文｜使用Flexus X实例安装宝塔面板教学
目录 一、Flexus X实例简介 1.1 概述 1.2 产品规格 二、切换操作系统 2.1 Huawei Cloud EulerOS 2.0 标准版 2.2 切换镜像 三、部署宝塔面板 3.1 安装宝塔面板 3.2 放通安全组规则 3.3 登录宝塔面板 四、使用感受 4.1 柔性算力随心配 4.2 一直加速一直快 4.3 越用…...
1.量化第一步，搭建属于自己的金融数据库！
数据是一切量化研究的前提。 做量化没有数据，就相当于做饭时没有食材。 很多时候，我们需要从大量的数据中寻找规律，并从中开发出策略。如果我们每次使用的时候，都从网上去找数据，一方面效率低下，另一方面短…...
git-repo系列教程(6) 在自己服务器上搭建git-repo仓库
为什么要在自己的服务器上搭建git-repo仓库呢? 因为 清华大学开源软件镜像站 有时会更新同步git repo,导致不能使用.可能在局域网不能访问外网,无法下载镜像站上的git-repo仓库完全版. 操作步骤 1.获取git-repo仓库 需要先下载完全的仓库 cd .repo/repo/ #获取镜像站上的…...
微服务——服务保护（Sentinel）（一）
1.雪崩问题 级联失败或雪崩问题指的是在微服务架构中，由于服务间的相互依赖和调用，当一个服务出现故障时，会引起调用它的服务也出现故障，进而引发整个调用链路的多个服务都出现故障，最终导致整个系统崩溃的现象。 产生…...
jenkins声明式流水线语法详解
最基本的语法包含 pipeline：所有有效的声明式流水线必须包含在一个 pipeline 块中stages：包含一系列一个或多个stage指令stage：stage包含在stages中进行，比如某个阶段steps：在阶段中具体得执行操作，一个或…...
mini-lsm通关笔记Week2Overview
Week 2 Overview: Compaction and Persistence 在上周，您已经实现了LSM存储引擎的所有必要结构，并且您的存储引擎已经支持读写接口。在本周中，我们将深入探讨SST文件的磁盘组织，并研究在系统中实现性能和成本效益的最佳方法。我们…...
基于SpringBoot的在线点餐系统【附源码】
基于SpringBoot的高校社团管理系统（源码L文说明文档） 4 系统设计 4.1 系统概述 网上点餐系统的结构图4-1所示： 图4-1 系统结构 模块包括主界面，首页、个人中心、用户管理、美食店管理、美食分类管理、美食…...
生成式语言模型底层技术面试
在准备生成式语言模型的底层技术面试时，可以关注以下几个关键领域： 1. 模型架构 Transformer架构：了解自注意力机制、编码器-解码器结构，以及如何处理序列数据。预训练与微调：解释预训练和微调的过程，如何…...
HTML开发指南
目录 一、HTML基础1. HTML简介（1）标记语言（2）结构化文档（3）标签与属性（4）注释（5）版本演变 2. HTML文档结构（1）文档类型声明࿰…...
共筑数据安全防线！YashanDB与SPU完成兼容性互认证
近日，深圳计算科学研究院崖山数据库系统YashanDB与深圳市机密计算科技有限公司SPU机密计算协处理器顺利完成兼容性互认证。测试结果表明，双方产品完全兼容，稳定运行，能为用户提供全链路的数据安全管理解决方案，助力央国…...
【FastAPI】使用FastAPI和Redis实现实时通知(SSE)
在当今快速发展的Web应用程序中，实时通知已成为用户体验的重要组成部分。无论是社交媒体更新、消息通知，还是系统状态提醒，实时数据推送可以极大地提升用户互动性。本文将详细介绍如何使用FastAPI和Redis实现Server-Sent Events (SSE) 来推送…...
Keyence_PL_MC_HslCommunication import MelsecMcNet
import tkinter as tk from tkinter import messagebox from datetime import datetime from HslCommunication import MelsecMcNet, OperateResult def 创建_plc_应用程序(): class 应用程序(tk.Tk): def __init__(self): super().__init__() …...
软件架构的演变与趋势(软件架构演变的阶段、综合案例分析：在线电商平台架构演变、开发补充)
随着软件开发技术的不断进步，软件架构从最初的简单结构演变为如今的复杂系统，架构设计不再是简单的代码组合，而是战略性的系统设计，确保系统具备可扩展性、可靠性、安全性和可维护性。 文章目录 1. 软件架构演变的阶段1.1 单体架…...
Shopify独立站运营必知必会：选品与防封技巧
独立站和第三方平台是目前最常见的跨境电商销售模式，相比于第三方平台，独立站的商家可以自己建站，自行决定运营模式和营销手段等策略，尤其是在准入门槛上，难度会更低，这些特点吸引了不少商家选择独立站开店…...
Unity开发绘画板——03.简单的实现绘制功能
从本篇文章开始，将带着大家一起写代码，我不会直接贴出成品代码，而是会把写代码的历程以及遇到的问题、如何解决这些问题都记录在文章里面，当然，同一个问题的解决方案可能会有很多，甚至有更好更高效的方式是…...
R语言的基础知识R语言函数总结
R语言与数据挖掘：公式；数据；方法 R语言特征 对大小写敏感通常，数字，字母，. 和 _都是允许的(在一些国家还包括重音字母)。不过，一个命名必须以 . 或者字母开头，并且如果以 . 开头&…...
龙年国庆专属姓氏头像
关注▲洋洋科创星球▲一起成长！ 2024年，我们迎来了龙年，龙年国庆姓氏头像！ 慢慢找！ 你的和你朋友的都有。 01赵 02 钱 03 孙 04 李 05 周 06 吴 07 郑 08 王 09 冯 010 陈 011 褚 012 卫 013 蒋 014 沈 015 韩 姓氏…...
基于Es和智普AI实现的语义检索
1、什么是语义检索 语义检索是一种利用自然语言处理（NLP）和人工智能（AI）技术来理解搜索查询的语义，以提供更准确和相关搜索结果的搜索技术，语义检索是一项突破性的技术，旨在通过深入理解单词和…...
URI和URL的区别
1: 将 URI 转换为 URL import java.net.URI; import java.net.URL;public class UriToUrlExample {public static void main(String[] args) {// 创建一个 URI 对象URI uri = new URI("http://example.com/path/to/resource");// 将 URI 转换为 URLtry {URL url = u…...
Java 入门指南：获取对象的内存地址
文章目录 hashCode()应用重写 hashCode() 方法示例 Symstem . indentityHashCode()应用 注意事项 在 Java 开发中，了解对象的内存管理是十分重要的，尽管 Java 的设计初衷是让开发者更专注于业务逻辑而非底层资源管理。但在某些情况下，了解对象…...
【Linux】项目自动化构建工具-make/Makefile 详解
🔥 个人主页：大耳朵土土垚 🔥 所属专栏：Linux系统编程 这里将会不定期更新有关Linux的内容，欢迎大家点赞，收藏，评论🥳🥳🎉🎉🎉 文章目…...
嵌入式开发中学习C++的用处？
这个问题一直有同学在问，其实从我的角度是一定是需要学的，最直接的就是你面试大厂的嵌入式岗位或者相关岗位，最后一定会问c，而很多人是不会的，这就是最大的用处，至于从技术角度考量倒是其次，因为…...
基于SAM大模型的遥感影像分割工具，用于创建交互式标注、识别地物的能力，可利用Flask进行封装作为Web后台服务
如有帮助，支持一下（GitHub - Lvbta/ImageSegmentationTool-SAM: An interactive annotation case developed based on SAM for remote sensing image annotation, which can generate corresponding segmentation results based on point, multi-point, …...