一直向前走。千万别向后看。否则就永远回不去那个世界了
computed属性
计算属性：在模版中可以直接通过插值语法显示一些data中的数据，但有时我们可能需要对数据进行一些处理和转化后再显示，或者需要将多个数据结合起来进行显示，此时就要用到计算属性。
function FistFunctionFmethod() { alert("开始学习Vue.js") const app = Vue.createApp({ data() { return { lastNme: '星辰', FistName: '大海', scor: 60, } }, methods: { showName() { console.log("调用属性的信息函数showName() ") return this.FistName + this.lastNme }, update() { console.log("调用属性的信息函数update ") this.FistName = "Hellow" }, getsort() { console.log("调用属性的信息函数 getsort() ") return this.scor >= 60 ? '及格' : '不及格' }, }, // computed的属性 computed: { getsort1() { console.log("操作成绩") return this.scor >= 60 ? "及格" : "不及格"; }, cshowName() { console.log("操作姓名") return this.FistName + this.lastNme }, showget: { get() { console.log("get") return this.FistName + this.lastNme }, }, set(value) { } } }) app.mount("#app") } FistFunctionFmethod()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 计算机属性 --> <div id="app"> <h1>{{lastNme+' '+FistName}}</h1> <h1>{{ showName()}}</h1> <h1>{{cshowName}}</h1> <h2>{{getsort()}}</h2> <h2>{{getsort1}}</h2> <button @click=" update">按钮</button> <h1>showget</h1> </div> <script src="./js/vue.js"></script> <script> function FistFunctionFmethod() { alert("开始学习Vue.js") const app = Vue.createApp({ data() { return { lastNme: '星辰', FistName: '大海', scor: 60, } }, methods: { showName() { console.log("调用属性的信息函数showName() ") return this.FistName + this.lastNme }, update() { console.log("调用属性的信息函数update ") this.FistName = "Hellow" }, getsort() { console.log("调用属性的信息函数 getsort() ") return this.scor >= 60 ? '及格' : '不及格' }, }, // computed的属性 computed: { getsort1() { console.log("操作成绩") return this.scor >= 60 ? "及格" : "不及格"; }, cshowName() { console.log("操作姓名") return this.FistName + this.lastNme }, showget: { get() { console.log("get") return this.FistName + this.lastNme }, }, set(value) { } } }) app.mount("#app") } FistFunctionFmethod() </script> </body> </html>
watch属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性watch。watch中可以执行任何逻辑，如函数节流，Ajax异步获取数据，甚至操作 DOM（不建议）。
function FistFunctionFmethod() { // alert("开始学习Vue.js") const app = Vue.createApp({ data: function () { return { obj: { a: 0, b: 0, c: 0, d: 0 }, array:["ASD","LOKJ","POU"], info: "我是数据的监听者的信息" } }, watch: { info: { immediate: true, handler: function (newVal, oldVal) { // 两个参数 console.log("新的数据" + newVal); console.log("旧的数据" + oldVal); } }, // 对象里面的key最传统的方式加引号 'obj.a': { // 因为对象是引用数据类型 所以每次值发生了变化 对应的内存地址 没有发生变化 所以 newVal, oldVal 同一个 deep: true, immediate: true, handler: function (newVal, oldVal) { // 两个参数 console.log("新的对象数据objecta" + newVal + " "); console.log("旧的对象数据objecta" + oldVal + " "); }, obj:{ // deep: true, immediate: true, handler: function (newVal, oldVal) { // 两个参数 console.log("新的对象数据object" + newVal['a']); console.log("旧的对象数据object" + oldVal['a']); }, } } },
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <!--!Watch的使用--> <body> <div id="app"> <h1 @click="add">{{info}}</h1> <h2 @click="obj.a++">{{obj.a}}</h2> <h2 @click="obj.b">{{obj.b}}</h2> <h2 @click="obj.c++">{{obj.c}}</h2> <h2 @click="obj.a--">{{obj.d}}</h2> </div> <script src="../DayVue02/js/vue.js"></script> <script> function FistFunctionFmethod() { // alert("开始学习Vue.js") const app = Vue.createApp({ data: function () { return { obj: { a: 0, b: 0, c: 0, d: 0 }, array:["ASD","LOKJ","POU"], info: "我是数据的监听者的信息" } }, watch: { info: { immediate: true, handler: function (newVal, oldVal) { // 两个参数 console.log("新的数据" + newVal); console.log("旧的数据" + oldVal); } }, // 对象里面的key最传统的方式加引号 'obj.a': { // 因为对象是引用数据类型 所以每次值发生了变化 对应的内存地址 没有发生变化 所以 newVal, oldVal 同一个 deep: true, immediate: true, handler: function (newVal, oldVal) { // 两个参数 console.log("新的对象数据objecta" + newVal + " "); console.log("旧的对象数据objecta" + oldVal + " "); }, obj:{ // deep: true, immediate: true, handler: function (newVal, oldVal) { // 两个参数 console.log("新的对象数据object" + newVal['a']); console.log("旧的对象数据object" + oldVal['a']); }, } } }, methods: { add() { this.info = '1233' } } }) app.mount("#app") } FistFunctionFmethod() </script> </body> </html>
V-model的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="./js/vue.js"></script> <div id="app"> 账号:<input type="text" v-model="message"> <textarea v-model="textarea" name="" id="" cols="30" rows="10"></textarea> {{textarea}} <h1>{{message}}</h1> 单选框: <input type="radio" name="" id="" value="同意用户信息" v-model="radio"> 单选框: <input type="checkbox" name="" id="" value="同意用户信息" v-model="radio"> <h1>radio:{{radio}}</h1 <input type="checkbox" value="1" v-model="like">1 <input type="checkbox" value="2" v-model="like">2 <input type="checkbox" value="3" v-model="like">3 <input type="checkbox" value="4" v-model="like">4 <input type="checkbox" value="5" v-model="like">5 <input type="checkbox" value="6" v-model="like">6 <h2>like:{{like}}</h2> <h1> <input type="radio" name="sex" id="" v-model="sex" value="man">男 <input type="radio" name="sex" id="" v-model="sex" value="women">女 <input type="radio" name="sex" id="" v-model="sex" value="un">未知 <h1>sex:{{sex}}</h1> </h1> <h1>下拉表</h1> <select name="" id="" v-model="arry" multiple size="2"> <option value="" v-for="item in firut" key="item" value="item" >{{item}}</option> </select> <!-- <select name="" id="" v-model="arrys" multiple> --> <!-- <option value="" v-for="item.value in firut1" key="item" value="item.value">{{item.value}}</option> --> <!-- <h1>arrys:{{arrys}}</h1> --> <!-- </select> --> </div> <script> function FistFunctionFmethod() { alert("开始学习Vue.js") const app = Vue.createApp({ data: function () { return { message: "数据内容一", password: '123344', textarea: "", radio: '', // 有多个 like: [], sex: "man", firut: ["苹果", "香蕉", "西瓜", "葡萄","梨子"], firut1: [ { label: "苹果", value: "apple" }, { label: "香蕉", value: "banner" }, { label:"西瓜", value:"womment" } ], arry: '', arrays:"" } }, methods: { } }) app.mount("#app") } FistFunctionFmethod() </script> </body> </html>
function FistFunctionFmethod() { alert("开始学习Vue.js") const app = Vue.createApp({ data: function () { return { message: "数据内容一", password: '123344', textarea: "", radio: '', // 有多个 like: [], sex: "man", firut: ["苹果", "香蕉", "西瓜", "葡萄","梨子"], firut1: [ { label: "苹果", value: "apple" }, { label: "香蕉", value: "banner" }, { label:"西瓜", value:"womment" } ], arry: '', arrays:"" } }, methods: { } }) app.mount("#app") } FistFunctionFmethod()
