当前位置：首页 > 前端技术 > vue >内容正文

vue

【前端5】vue：实例，插值表达式，v-，组件

发布时间：2024/4/24 vue 157 豆豆

生活随笔收集整理的这篇文章主要介绍了【前端5】vue：实例，插值表达式，v-，组件小编觉得挺不错的,现在分享给大家,帮大家做个参考.

文章目录

1.vue安装：MVVM
2.案例：对象是vm，里面el等是构造参数
3.案例：num是数据即M，前端是V，这样交互简化了jquary(js)
4.vue实例：先绑定
5.vue对象的生命周期：8个函数（主要created）
6.this/指令/插值表达式：el是element
7.v-text&v-html：解决插值闪烁，将数据渲染到页面
8.v-model数据的双向绑定：使用v-model实现与表单（form）控件的双向绑定，其他控件只能单向
9.v-on，v-for：给页面元素绑定事件
10.v-if，v-show：渲染是源码，不同于显示
11.v-bind：给html的属性绑定值（html元素本来就有的属性如：name，id等）
12.computed计算属性：进行逻辑处理，才能得到最终的结果
13.watch：监控，对用户界面输入数据进行异步校验
14.组件：可重复使用的代码

1.vue安装：MVVM

VM：View-Model。

html能被浏览器解析，成本低，就像静态文件一样拿来就能用，性能高。jsp不能被浏览器解析，必须经过服务端处理成html再返回前端。vue是mvvm架构的js框架。

如下vue三种安装方式：

CDN：服务器存静态资源（图片，js文件，css文件）。应用场景：直播视频，对速度要求高的网站，加速资源请求。

idea创建vue工程：-y(yes)，Static Web - Static Web。

2.案例：对象是vm，里面el等是构造参数

如下拖进来表示导入，因为是js代码，所以在 < script > 标签里。

网页显示如下。

如下网页控制台，name属性是我们自己写的，上面的网页显示也跟着变。

3.案例：num是数据即M，前端是V，这样交互简化了jquary(js)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>入门案例2</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{name}}，比较帅<br>有很多粉丝{{num}}个<input type="text" v-model="num"/><br><button v-on:click="add">刷粉</button> </div> </body> <script>//2.创建vue的实例//{}对象//数据的双向绑定必须和表单控件（input select texteare）进行绑定//v-model将表单控件与vue定义的属性进行绑定var vm = new Vue({//el element 元素el: "#app",//3.将vue的实例与视图元素进行绑定，指定vue的操作范围data: {//4.定义需要渲染的数据模型name: "宝强",//定义数据num: 100},methods: {//定义用户事件或方法 function add(){} 或 add：function(){} add() { //ES6语法this.num++;},other() {this.add();}}}); </script> </html>

4.vue实例：先绑定

5.vue对象的生命周期：8个函数（主要created）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>创建vue的实例</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"><input type="text" v-model="message"><h2>{{message}}</h2> </div> </body> <script>var vm = new Vue({el: '#app',data: {message: "we are 伐木累!"},beforeCreate: function () {console.group('beforeCreate 创建前状态===============》');console.log("%c%s", "color:red", "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red", "data : " + this.$data); //undefinedconsole.log("%c%s", "color:red", "message: " + this.message); //undefined},created: function () { //调用created方法console.log("===========this " + this); //undefinedconsole.group('created 创建完毕状态===============》');console.log("%c%s", "color:red", "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red", "data : " + this.$data); //已被初始化console.log("%c%s", "color:red", "message: " + this.message); //已被初始化},beforeMount: function () {console.group('beforeMount 挂载前状态===============》');console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化console.log("%c%s", "color:red", "message: " + this.message); //已被初始化},mounted: function () {console.group('mounted 挂载结束状态===============》');console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化console.log("%c%s", "color:red", "message: " + this.message); //已被初始化},beforeUpdate: function () {console.group('beforeUpdate 更新前状态===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);},updated: function () {console.group('updated 更新完成状态===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);},beforeDestroy: function () {console.group('beforeDestroy 销毁前状态===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);},destroyed: function () {console.group('destroyed 销毁完成状态===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message)}}) </script> </html>

dopost和doget（钩子函数）是servlet中doservice调的。

6.this/指令/插值表达式：el是element

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>入门案例1</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>差值表达式{{}}}</h3><div id="app">基本数据类型：{{name}}<br>对象数据类型：{{user.name}}--{{user.age}}<br>表达式：{{1+1}}<br>js内置对象：{{new Date()}}<br>调用方法：{{add()}}<br></div> </body> <script>var vm = new Vue({//el element 元素el:"#app",//3.将vue的实例与视图元素进行绑定，指定vue的操作范围data:{//4.定义需要渲染的数据模型name:"jack",user:{name:"ross",age:18}},methods:{add(){return "你是最棒的";}}}); </script> </html>

7.v-text&v-html：解决插值闪烁，将数据渲染到页面

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>入门案例1</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>v-text<br>v-html</h3><div id="app">v-text:<li v-text="name"/><br>v-html:<li v-html="name"/></div> </body> <script>var vm = new Vue({el:"#app",//3.将vue的实例与视图元素进行绑定，指定vue的操作范围data:{//4.定义需要渲染的数据模型name:"<b>jack</b>",},}); </script> </html>

差值闪烁：差值表达式，数据没过来显示源码。

8.v-model数据的双向绑定：使用v-model实现与表单（form）控件的双向绑定，其他控件只能单向

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>v-model</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>v-model 实现数据的双向绑定</h3><div id="app">{{name}}<br><input type="text" v-model="name" /> </div> </body> <script>var vm = new Vue({el:"#app", data:{ //定义需要渲染的数据模型name:"",},}); </script> </html>

9.v-on，v-for：给页面元素绑定事件

如下在new Vue{}里。如上@click.stop是阻止事件的传播。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>v-on</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>v-for 遍历数据</h3><div id="app"><ul><li v-for="item in users">{{item.name}}-- {{item.gender}}-- {{item.age}}</li></ul>-------序号<ul><li v-for="(item,indx) in users">{{indx}}--{{item.name}}-- {{item.gender}}-- {{item.age}}</li></ul>--------遍历对象<ul><li v-for="(v,k,index) in user"> {{index+1}}--- {{v}}-- {{k}}</li></ul></div> </body> <script>var vm = new Vue({el:"#app", data:{ users:[{name: '柳岩', gender: '女', age: 21},{name: '有哥', gender: '男', age: 30},{name: '范冰冰', gender: '女', age: 24},{name: '刘亦菲', gender: '女', age: 18},{name: '古力娜扎', gender: '女', age: 25}],user:{name:'柳岩', gender:'女', age: 21}}}); </script> </html>

10.v-if，v-show：渲染是源码，不同于显示

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title> v-if&v-show根据条件渲染</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>v-if&v-show根据条件渲染</h3><div id="app"><p v-if="show">看得见我if</p> <p v-else>  我是看不见else</p>------v-show<p v-show="show">我是v-show</p></div> </body> <script>var vm = new Vue({el:"#app", data:{show:true}}); </script> </html>

11.v-bind：给html的属性绑定值（html元素本来就有的属性如：name，id等）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title> v-bind</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>v-bind 给用html元素绑定值</h3><div id="app"><a :name="name" v-bind:href="url">baidu</a><br><a :id="id" :href="url">baidu</a> </div> </body> <script>var vm = new Vue({el:"#app",data:{url:"http://www.baidu.com",name:"baidu",id:"my"}}); </script> </html>

下行是上行的简写。

12.computed计算属性：进行逻辑处理，才能得到最终的结果

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>计算属性</title><script src="node_modules/vue/dist/vue.js"></script> </head> <body><h3>计算属性</h3><div id="app">语文：<input type="text" v-model="chinese"/><br>数学：<input type="text" v-model="math"/><br>总分：{{total}}</div> </body> <script>//2.创建vue的实例//{}对象var vm = new Vue({//el element 元素el:"#app",//3.将vue的实例与视图元素进行绑定，指定vue的操作范围data:{chinese:100,math:10},computed:{total(){return this.chinese+this.math;}}}); </script> </html>

13.watch：监控，对用户界面输入数据进行异步校验

14.组件：可重复使用的代码

总结

以上是生活随笔为你收集整理的【前端5】vue：实例，插值表达式，v-，组件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

上一篇：【前端4】bootstrap：栅格系统，
下一篇： Vue.js项目新建及目录结构分析