vue基础语法

科技2025-12-21 13

vue基础语法

vue引言vue入门v-text和v-htmlvue引言vue入门v-text和v-htmlv-on 事件的使用事件简化语法和参数传递 v-show

vue引言

vue入门

v-text和v-html

====================================================

vue引言

vue 渐进式javascript框架：让我们通过操作很少得Dom元素，就很容易完成数据和视图的绑定双向绑定 mvvm

vue入门

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{masg}} <br> <span> {{masg}} <h1>{{masg}}</h1> </span> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app",//element data:{ masg:"你好，杨房东第一天打卡2020 10 08" } }); </script> </html>

总结： 1.vue 实例（对象）中的el属性：代表vue对象的作用范围在作用范围内都i可以使用data中属性 2.data属性：可以用{{}} 取出 3.在使用{{}}获取data数据时书写表达式，运算符调用相关方法和逻辑 4.el属性：推荐使用id选择器

v-text和v-html

v-text：获取data中数据以文本形式渲染到标签内部

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app" class="aa"> <span>{{ msg }}}</span> <span v-text="msg"></span> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ msg:"hellow yfd", } }); </script> </html>

总结： 1.v-text 覆盖原有标签内的值 2.v-text避免网络环境差是出现插值闪烁

v-html：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app" class="aa"> <span>{{ msg }}</span> <span v-html="msg"></span> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ msg:"<a href='01.vue.html'>yyyy</a>", } }); </script> </html>

v-on 事件的使用

<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app" class="aa"> <span>{{ msg }}</span> <h2>{{age}}</h2> <input type="button" value="改变年龄" v-on:click="changeage"> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ msg:"yfd hellow", age:"20" }, methods:{ //用来定义vue中的事件 changeage : function (){ alert("点击触发"); } } }); </script> </html>

总结：事件三要素：事件源：发生事件的dom元素事件：发生的动作单击监听器：js函数 1.v-on:事件名 2.v-on:click=“changeage” 函数名 3. methods 事件都定义在这个属性下 4. this 就是当前的vue实例可在函数中使用this取其他属性的值

事件简化语法和参数传递

函数名（）{}

<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app" class="aa"> <h2>{{age}}</h2> <input type="button" value="改变年龄" @click="changeage"> <h2>{{count}}</h2> <input type="button" value="改变" @click="changecount(23,'小黑')"> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ msg:"yfd hellow", age:20, count:1 }, methods:{ //用来定义vue中的事件 changeage : function (){ //在函数中获取vue实例中的数据 //this.age = this.age+1; //alert("点击触发"); this.age--; }, changecount(count,name){ alert(name); this.count = count; } } }); </script> </html>

v-show

v-show：用来控制页面中某个标签元素是否展示，底层通过控制元素的 display 属性来进行标签的显示和不显示控制。

在 v-show 中可以直接书写 boolean 值控制元素展示在 v-show 中可以通过变量控制标签展示和隐藏。在 v-show 中可以通过 boolean表达式控制标签的展示和隐藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app" v-show="true">{{masg}}  <h2 v-show="show">隐藏内容</h2>  <input type="button" value="展示or隐藏标签" @click="showmsg">  <h2 v-show="age>=30" >隐藏内容2</h2> <input type="button" value="age>30展示" @click="ageUp30"> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el:"#app",//element data:{ show:false, masg:"22222", age:27 }, methods:{ showmsg(){ this.show = !this.show; }, ageUp30(){ this.age++; console.log(this.age); } } }); </script> </html>

Processed: 0.033, SQL: 10

vue基础语法