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）！