Vue基础
1.模板语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--Vue模板语法有2大类:
1.插值语法:
功能:用于解析标签体内容。
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件..)。
举例:v-bind:href="xxx"或简写为 :href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性。
备注:Vue中有很多的指令,且形式都是:v-???,此处我们只是拿v-bind举个例子。
-->
<!-- 准备好一个容器 -->
<div id="root">
<h1>插值语法</h1>
<h3>你好 , {{name}} url={{school.url.toUpperCase()}}</h3>
<hr>
<h1>指令语法</h1>
<!-- 绑定值 "" 里按照 js表达式执行 v-bind可以动态给标签里的属性绑定值 v-bind可以简写成冒号 :-->
<a v-bind:href="school.url" v-bind:x="hello">点我跳转{{school.urlName.toUpperCase()}}1</a>
<a :href="school.url" :x="hello">点我跳转{{school.urlName}}2</a>
</div>
<script type="text/javascript" >
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
const vm = new Vue({
el:"#root",
data: {
name: "jack",
school:{
urlName:"百度",
url: "http://www.baidu.com",
},
hello:"你好"
}
})
</script>
</body>
</html>
2.数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据绑定</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
备注:
1.双向绑定一般都应用在表单类元素上(如:input、select等)
2.v-model:value可以简写为 v-model,因为v-model默认收集的就是value值。
-->
<!-- 准备好一个容器 -->
<div id="demo">
<!-- 普通写法 -->
单向数据绑定 <input type="text" v-bind:value="name"><br>
双向数据绑定 <input type="text" v-model:value="name">
<h1>{{name}}</h1>
<!-- 简写 -->
单向数据绑定 <input type="text" :value="name"><br>
双向数据绑定 <input type="text" v-model="name">
<!-- 如下代码是错误的 ,因为v-model只能应用在表单类元素(输入类元素) 上 对value 进行绑定 -->
<!-- <h2 v-model:x="name">你好啊</h2> -->
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
const vm = new Vue({
el: "#demo",
data: {
name: "小明",
age: 12
}
})
</script>
</body>
</html>
3.el与data的两种写法.html
这些带 $ 都是给我们程序员使用的
不带的就是很少让程序员去用的
但是还有一个东西
这用前端话来说叫做 原型对象 ,可以理解为 Java 的类,在里面声明的东西 相当于Java静态属性或者方法,任何它的 实例对象 都可以获取。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>el与data的两种写法.html</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例,随后再通过vm.$mount('#root') 指定el的值。
2.data有2种写法(1).对象式(2).函数式如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。
3.一个重要的原则:由vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
-->
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>你好 , {{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
// vue 对象创建出来 会把模板拿过来解析 ,解析完成后 ,会将解析后的视图,重新挂载到页面上面
// const vm = new Vue({
// // el:"#root", 第一种写法
// data: {
// name: "基哥"
// }
// })
// console.log(vm);
// 定时器 1秒后执行
// setTimeout(() => {
// vm.$mount('#root');//灵活 第二种写法 官方的词叫做挂载
// }, 1000);
//data的 两种写法
const vm = new Vue({
el: "#root",
//data的第一种写法: 对象式
// data: {
// name: "基哥"
// }
//data的第二种写法: 函数式
// data: function () {
// console.log('@@@',this); //this vue 实例对象
// return {
// name: "基哥"
// }
// }
//一般不能这么写 因为箭头函数 没有自己的this lambda表达式不会把 外部类作为 内部类的隐式引用
//所以this 就会往外找 ,找不到了就只能用 windows 对象了
// data:() => {
// console.log('@@@',this); //this 全局的 windows 对象
// return {
// name: "基哥"
// }
// }
//data第二种写法 的简写形式
data() {
console.log('@@@', this); //this 全局的 windows 对象
return {
name: "基哥"
}
}
})
</script>
</body>
</html>
4.MVVM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的MVVM.html</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
MVVM模型
1.M:模型(Model):data中的数据
2.V:视图(View):模板代码
3.VM:视图模型(ViewModel):Vue实例
观察发现:
1.data中所有的属性,最后都出现在了vm身上。
2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。
-->
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- view -->
<h1>学校名称:{{name}}</h1>
<h1>学习地址:{{address}}</h1>
<h1>测试1:{{1+1}}</h1>
<h1>测试2:{{$options}}</h1>
<h1>测试3:{{$emit}}</h1>
<h1>测试4:{{_c}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
//使用vm 来作为 Vue实例 的变量名 ,符合规范
const vm = new Vue({//viewmodel
el: "#root",
//model
data() {
return {
name:'田家炳中学',
address:'桂林市'
}
}
})
</script>
</body>
</html>
5.数据代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回顾Object.defineProperty方法</title>
<!-- 这个方法就是给一个对象添加一个属性用 或者定义一个属性用 -->
<!-- vue 底层 数据劫持 数据代理 数据监听 底层都是这个 -->
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<script type="text/javascript">
let number = 18;
let person = {
name: '张三',
sex: '男',
}
function getNumber(){
return number;
}
/*
这个方法传入一个对象 , 这个方法可以把所有对象的属性名转化成一个 String 的数组
*/
// Object.keys(person);
//删除一个属性方法 delete person.name
/*
第一个参数:要应用于哪个对象
第二个参数:给对象添加哪个属性名
第三个参数:针对这个属性的配置项 例如: value值 =18
*/
// age 这个属性 是不可以被枚举的 俗话就是 是不参与遍历的,但是在配置项里配置,可以让这个属性参与枚举
Object.defineProperty(person,'age',{
value: 18,
enumerable:true, //控制属性是否可以枚举 默认值 是false
writable :true , //控制属性是否可以被修改 默认值 是false
configurable :true , //控制属性是否可以被删除 默认值 是false
})
//猜测,有可能 会在 vue实例里 对 data数据进行了代理和监听 Object.defineProperty(vm,'property',{})
//还有一个猜测,这个number当被放入闭包函数的时候 将自动转化为包装类对象,也就是变成不是基本类型, 引用对象,所以才能够使用number 读取到这个值
//感觉跟 Android multabledata<T> 一个样子 毕竟 js不需要显示定义类型 就是属性委托的一个感觉 multabledata引用不变,只是其中属性值变,
//这个 defineProperty 就是感觉将 number 对象委托给了 person 对象
Object.defineProperty(person,'number',{
//当有人读取person number属性的时候, get函数(getter 就是get属性名加对应的函数)就会被调用 ,且返回值就是age 的值
get:function peiqi(){//名字随便设置
console.log("有人读取了数据",this);//this 就是person
return number;//能动态获取number的值
},
//当有人修改 person number属性的时候, set函数(setter 就是set属性名加对应的函数)就会被调用 ,执行这个函数
set(value){//简写
console.log("有人修改了数据",this,value);
number = value;
}
})
console.log('对象',person);
console.log(Object.keys(person));//遍历不出 age
for (const key in person) { //可以遍历对象 的KEY
console.log('@@@',key);
}
</script>
</body>
</html>
6.何为数据代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>何为数据代理</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 数据代理:通过一个对象代理对另一个对象的属性的操作 (读/写) -->
<script type="text/javascript">
let obj ={x: 100};
let obj2 ={y: 100};
Object.defineProperty(obj2,"x",{
get(){
return obj.x;
},
set(value){
//好好做自己,别被影响了,很累的,就当他是小孩子,越在意他越上头,越不在意,他反而失去兴趣就走了,我就没事了!
//v=value obnj.x = v //值就是赋值 ,变量就是将变量的引用 赋给这个变量 此引用既可以是基本引用 也可以是 引用堆区地址。
obj.x=value;
}
})
</script>
</body>
</html>
7.vue中的数据代理
options 就是配置对象 传入vue的构造的对象在 vue的构造函数参数名
将 options.data 的引用 赋值 给 vm._data
其实是_data数据发送变化,页面才会被监听,才会重新渲染,调用模板中vm的代理属性,拿到_data发送变化的值,渲染模板,更新页面
因为在模板中可以调用vm任何属性,如果不做代理,得用 _data来调用 ,就很麻烦,vue为了简化语法,就做了数据代理。
但是在赋值 data的时候做了数据劫持 ,为啥要做呢?是因为 响应式 做了对数据的监听,能够发现数据变化的时候,对模板上应用了变化的数据,进行重新的渲染 , 也就是替换它修改后的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
1.vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。
-->
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>学校名称:{{_data.name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
let data = {
name: "辽工",
address: "锦州"
}
const vm = new Vue({
el: "#root",
data
})
</script>
</body>
</html>
8. 事件处理
1.事件的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的基本使用</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- //标准 只有 onclick属性 上面绑定的是执行函数 带括号的 -->
<!-- vue v-on:click 绑定的其实也是 函数对象-->
<!-- 使用js绑定也是 函数对象 -->
<!-- <button v-on:click="showInfo">点我提示信息</button> -->
<!-- v-on:click 简写形式 @click -->
<button @click="showInfo1">点我提示信息1 (不传参)</button>
<!-- 想要传入一个参数怎么做 -->
<!-- //number 可以是 data 里面的属性 ,可以传入vm的任何东西 -->
<button @click="showInfo2(number,$event)">点我提示信息2 (传参)</button>
</div>
<!--
事件的基本使用:
1.使用v-on:xxx 或@xxx绑定事件,其中xxx是事件名;
2.事件的回调需要配置在methods对象中,最终会在vm上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数,都是被vue所管理的函数,this的指向是vm 或组件实例对象;
5.@click="demo"和@click="demo($event)"效果一致,但后者可以传参;
-->
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
//所有被vue管理的函数,最好写成普通函数,这样this就是当前 vue实例 ,箭头函数就不会把this传入进来,这样this就不是vm实例,就不统一了,这是规范
const vm = new Vue({
el: "#root",
data: {
name: 'jmj学堂' ,//这里面的对象 会被vm 数据劫持 和 数据代理
number: 17 ,
},
methods: {//这里面的不会被数据劫持和数据代理
//对象里面写方法可以用这个简写形式
showInfo1(event) {
//原生的事件也有参数,这个叫做事件对象
// console.log(event.target); // 事件发生的目标, 也就是这个按钮
// event.target.innerText='点击完毕'; 懂了吧
// console.log(event);
//箭头函数不传this进来 ,也就是不传vue实例, 一找没有this ,就会放大,到全局作用域 所以找到的是 window 原型对象
//vm创建在 script标签里面 相当于就是 全局作用域 因为 js 就是每个脚本里定义的变量 都是在window下绑定的 ,所以this没有,就找外部,那不就只剩window了吗
// console.log(this === vm );//vue实例 true
alert('同学你好!')
},
showInfo2(number, event) {
console.log(number, event);
alert('同学你好 ! !')
}
}
})
</script>
</body>
</html>
2. 事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
* {
margin-top: 20px;
}
.demo1 {
height: 50px;
width: 100px;
background-color: red;
align-content: center;
}
.box1 {
padding: 5px;
background-color: skyblue;
}
.box2 {
padding: 5px;
background-color: orange;
}
.list {
width: 200px;
height: 200px;
background-color: peru;
/*不够的时候 滚动条自动出来 */
overflow: auto;
}
li {
height: 100px;
}
</style>
</head>
<body>
<!--
Vue中的事件修饰符:
1.prevent:阻止默认事件(常用)
2.stop:阻止事件冒泡(常用);
3.once:事件只触发一次(常用);
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;--
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- prevent就是事件修饰符 -->
<!-- 1.prevent:阻止默认事件(常用) -->
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 2.stop:阻止事件冒泡(常用);-->
<!-- 点的是按钮 然后冒泡事件 冒到 div上了就执行了两个点击事件 -->
<div style="width: 300px;height:70px;background-color: green;" @click="showInfo">
<!-- 你停在哪,就在哪停 -->
<div class="demo1" @click.stop="showInfo">
<div @click.stop.prevent="showInfo">点我提示信息</div>
<!-- 修饰符可以 链式调用,但是是有顺序的 -->
<!-- <a href="http://www.baidu.com" @click.stop.prevent="showInfo">点我提示信息</a> -->
</div>
</div>
<!-- 3.once:事件只触发一次(常用); -->
<button @click.once="showInfo">点我提示信息</button>
<!-- 4.capture:使用事件的捕获模式 -->
<!--
事件触发的 时候:先从外向内捕获, 然后从内向外冒泡 捕获应该是捕获与其点击相关联的嵌套的点击事件的 Dom
-->
<!-- 这样捕获就直接输出,然后继续往下捕获 捕获完 按照从内往外的顺序进行冒泡执行,外面捕获执行完的 就不用执行了 -->
<div class="box1" @click.capture="showMessage(1)">
div1
<div class="box2" @click.capture="showMessage(2)">
div2
<div class="box2" @click="showMessage(3)">
div3
</div>
</div>
</div>
<!-- 5.self:只有event.target是当前操作的元素是才触发事件; -->
<!-- <div class="box1" @click="showInfo">
div1
<div class="box2" @click="showMessage(2)">
div2
<div class="box2" @click.self="showMessage(3)">
div3
</div>
</div>
</div> -->
<!-- 冒泡 event.target 都是你点击的那个Dom -->
<div style="width: 300px;height:70px;background-color: green;" @click.self="showInfo">
<!-- 你停在哪,就在哪停 -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
</div>
<!-- 6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;/ -->
<!-- 滚动条监听 滚到底就不动了-->
<ul class="list" @scroll="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!-- 鼠标滚轮监听 不管滚不滚到底,只要滚轮动,就会触发-->
<!-- 有一个小细节 使用下面demo方法 滚动滚轮是先出发回调 下面demo方法 当方法执行结束后才会触发 滚动条的调整 -->
<!-- passive:事件的默认行为立即执行,无需等待事件回调执行完毕 相当于异步 ,不阻塞ui更新 不需要等回调执行完了,再去执行事件的默认行为 -->
<ul class="list" @wheel.passive="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
const vm = new Vue({
el: "#root",
data: {
name: 'jmj学堂'
},
methods: {
showInfo(event) {
// event.preventDefault();//阻止默认的行为,例如上面 a标签的跳转 这是原来的写法,新写法 在@click后面加个 @click.prevent
// event.stopPropagation()//阻止事件冒泡
// alert('同学你好! ')
console.log(event.target);
},
showMessage(msg) {
console.log(msg);
},
demo() {
for (let index = 0; index < 100000; index++) {
console.log('@');
}
console.log('执行完毕');
}
}
})
</script>
</body>
</html>
3. 键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
1.Vue中常用的按键别名:
回车=>enter vue 起的别名 原名叫 Enter 其实你使用Enter也是可以触发按键事件的
删除=>delete(捕获“删除”和“退格”键)
退出=>esc
空格=>space
换行=>tab (特殊:必须配合keydown 去使用)
上=>up
下=>down
左=>left
右=>right
tab 在按下那一刻就会将焦点切到别的元素, 导致抬起事件没有触发,可以设置为keydown.tab就没问题了
2.Vue未提供别名的按键,可以使用按键原始的key(名字)(推荐使用名字,别用keyCode编码)值去绑定,但注意要转为kebab-case(短横线命名)由多个单词组成的要转化为短横线命名 CapsLock转化为caps-lock
3.系统修饰键(用法特殊):ctrl、alt、shift、meta(win键)
(1),配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
(2). 配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键(不推荐) @keyup.13
5.Vue.config.keyCodes.自定义键名=键码,可以去定制按键别名 不推荐 因为 keycode在不同键盘上可能不一样
-->
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>欢迎来到 {{name}} 学习</h2>
<!-- 键盘事件 keydown 按下触发 keyup 抬起触发 -->
<!-- vue 按键处理 别名 常用按键 别名 -->
<!-- <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"> -->
<!-- 修饰系统修饰符的时候 可以链式调用 让ctrl + y 才能提示输入 -->
<!-- 阻止这个 也能用 -->
<input type="text" placeholder="按下回车提示输入" @keydown.ctrl.s.prevent="showInfo">
</div>
<script type="text/javascript">
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
// Vue.config.keyCodes.huiche = 13;
const vm = new Vue({
el: "#root",
data: {
name: 'jmj学堂'
},
methods: {
showInfo(event) {
// 原本的方式 是使用event 来知道按键编码 13 就是 回车的编码
// let flag = event.keyCode === 13
// if(flag){
// console.log(event.key + '=' + event.keyCode); //key就是按键的名字, keyCode就是按键的编码
console.log(event.target.value);
// }
}
}
})
</script>
</body>
</html>
9.姓名案例
1.姓名案例插值语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例_插值语法实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<div id="father" style="width: 300px;height: 100px;border: 2px red solid;margin:auto auto">
<span>姓:</span> <input type="text" style="margin: 5px 10px; width: 100px; height: 15px;"
v-model="lastName"><br>
<span>名:</span> <input type="text" style="margin: 5px 10px; width: 100px; height: 15px;"
v-model="firstName"><br>
<span>全名:</span>
<div style="display: inline-block;width: 70px;height: 15px;margin-left: 40px;">
<!-- lastName.slice(0,3) 截取字符串 相当于 substring -->
<font style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
{{lastName.slice(0,3)}}-{{firstName}}</font>
</div>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
const vm = new Vue({
el: "#root",
data: {
lastName: '',
firstName: '',
}
})
</script>
</body>
</html>
2.姓名案例 methods实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例_methods实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
* {
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<div id="father" style="width: 300px;border: 2px red solid;margin:auto auto;">
<span>姓:</span> <input type="text" style=" width: 100px; height: 15px;" v-model="lastName"><br>
<span>名:</span> <input type="text" style=" width: 100px; height: 15px;" v-model="firstName"><br>
<span>全名:</span>
<div style="display: inline-block;width: 70px;height: 15px;margin-left: 40px;">
<!-- lastName.slice(0,3) 截取字符串 相当于 substring -->
<!-- 这是每次重新渲染模板都执行 6次 -->
<font style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">{{fullName()}}</font>
<font style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">{{fullName()}}</font>
<font style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">{{fullName()}}</font>
<font style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">{{fullName()}}</font>
<font style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">{{fullName()}}</font>
<font style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">{{fullName()}}</font>
</div><br>
<button @click="fullName">点我发生事件</button>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
const vm = new Vue({
el: "#root",
data: {
lastName: '',
firstName: '',
},
methods: {
fullName() {
//必须要显示声明 this
console.log('@');//当一个data值改变,会去重构它所用到的模板,重新解析,所以每次改变,都会重新执行这个函数拿到最新的值
return this.lastName + "-" + this.firstName
}
}
})
</script>
</body>
</html>
3.姓名案例_计算属性的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例_计算属性实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
* {
padding: 5px;
margin: 5px;
}
</style>
</head>
<!--
计算属性:
1.定义:要用的属性不存在,要通过己有属性计算得来。
2.原理:底层借助了objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
1.计算属性最终会出现在vm上,直接读取使用即可。
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
-->
<body>
<!-- 准备好一个容器 -->
<div id="root">
<div id="father" style="width: 300px;border: 2px red solid;margin:auto auto;">
<!-- 被注释掉,只要是vm属性 不管在不在页面上被引用,都会变化后,所依赖的计算属性 get方法就会执行 -->
<span>姓:</span> <input type="text" style=" width: 100px; height: 15px;" v-model="lastName"><br>
<span>名:</span> <input type="text" style=" width: 100px; height: 15px;" v-model="firstName"><br>
<span>测试:</span> <input type="text" style=" width: 100px; height: 15px;" v-model="x"><br>
<span>测试y:</span> <input type="text" style=" width: 100px; height: 15px;" v-model="y"><br>
<span>全名:</span>
<div style="display: inline-block;width: 150px;height: 15px;margin-left: 40px;">
<!-- lastName.slice(0,3) 截取字符串 相当于 substring -->
<span>{{fullName}}</span><br>
<!-- get只被调用了一次 ,因为是属性,所以模板执行一次属性就被附上值了,后面需要拿,就当作普通属性去取,所以只执行一次 -->
<!-- 但如果是方法就会执行很多次,因为渲染一次模板,不知道你的方法返回值是不是一样的,所以都给你执行了, -->
<span>{{fullName}}</span><br>
<span>{{fullName}}</span><br>
<span>{{fullName}}</span><br>
<span>{{fullName}}</span><br>
</div><br>
<button @click="add">点我发生事件</button>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
var c = 1;
const vm = new Vue({
el: "#root",
data: {
lastName: '',
firstName: '',
x: '',
number: 0,
y: ''
},
methods: {
add() {
c++;
}
}
,
computed: {
fullName: {
//get 有什么作用? 当有人读取fullName时,get就会被调用,返回值作为fullName的值
//get什么时候调用
//1.初次读取fullName时调用。
//2.所依赖的数据发生变化的时候(在外面发生变化,不是计算属性方法里改变发生变化)
//3.如果其他属性变化导致页面重构的时候 方法是不会执行的,没有依赖项的话 如果使function()必定每次都执行
get() {
console.log('get被调用了');
this.number++;
// vue 把get的this指向 调成了 vue实例vm (有函数是可以转换的)
//this 就是 vm
var b = this.x;//改X也行 只要是在方法体里面调用了的属性,只要变更了,就会重新调用
//但是想要变成计算属性的监听属性,必须时vm管理的属性发生变化,才能够发生重新调用 c就无效
var a = c;
// return this.lastName + "-" + this.firstName + '-' + this.number+'-'+c;
return this.lastName + "-" + this.firstName;
},
set(value) {
console.log('set被调用了', value);
let arr = value.split('-');
console.log(arr);
//改变使 属性发生变化 从而让模板渲染 变化的属性,还有这些变化属性所依赖的计算属性的get方法
this.lastName = arr[0];
this.firstName = arr[1];
}
}
}
})
</script>
</body>
</html>
4.姓名案例_计算属性简写形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例_计算属性简写</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
* {
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- 以后注意在模板中 {{}} 中到底写的是 data中属性 还是 methods中的方法 还是 computed里的计算属性 嗯! -->
<div id="father" style="width: 300px;border: 2px red solid;margin:auto auto;">
<span>姓:</span> <input type="text" style=" width: 100px; height: 15px;" v-model="lastName"><br>
<span>名:</span> <input type="text" style=" width: 100px; height: 15px;" v-model="firstName"><br>
<span>全名:</span>
<div style="display: inline-block;width: 150px;height: 15px;margin-left: 40px;">
<span>{{fullName}}</span><br>
</div><br>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
const vm = new Vue({
el: "#root",
data: {
lastName: '',
firstName: ''
},
computed: {
//只考虑读不考虑改 才可以简写 fullName 就可以当getter 去用
fullName() {
return this.lastName + "-" + this.firstName;
}
}
})
</script>
</body>
</html>
原文地址:https://blog.csdn.net/qq_53374893/article/details/140644189
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!