vue
2021/4/13 18:30:44
本文主要是介绍vue,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录
- 1.1 VUE的基本使用
- 1.2 理解MVVM
- 2. 模板语法
- 双大括号表达式
- 指令一:强制数据绑定 :
- 指令二.绑定事件监听@
- 3.计算属性和监视
- computed
- watch
1.1 VUE的基本使用
有input要加上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>why</title> </head> <body> <!-- 1.引入Vue.js 2.创建Vue对象 eL :指定根eLement(选择器) data :初始化数据(页面可以访问) 3.双向数据绑定: v-model 4.显示数据: {{xxx}} 5.理角解vue的mvvm实现 --> <div id="app"> <input type="text" v-model="username"> <p>Hello {{username}}</p> </div> <script type="text/javascript" src="/vue/vue.js"></script> <script type="text/javascript" > const vm=new Vue({ el:'#app', data:{ username:'' } }) </script> </body> </html>
效果:输入框输入啥 下面就显示什么
1.2 理解MVVM
2. 模板语法
双大括号表达式
第二个是转换成大写的 里面就相当于js语法一样 那些方法
<div id="app"> <input type="text" v-model="username"> <p>Hello {{username}}</p> <p>Hello {{username.toUpperCase()}}</p> </div> <script type="text/javascript" src="/vue/vue.js"></script> <script type="text/javascript" > const vm=new Vue({ el:'#app', data:{ username:'' } }) </script>
指令一:强制数据绑定 :
<div id="a<script type="text/javascript" src="/vue/vue.js"></script> <script type="text/javascript" > const vm=new Vue({ el:'#app', data:{ username:'', imgUrl:'https://imgoss.ilive.cn/image/202104/13/1618302927248_365x204.jpg' } }) </script>pp"> <img src="imgUrl"> <img v-bind:src="imgUrl"> <img :src="imgUrl"> </div>
指令二.绑定事件监听@
<div id="app"> <input type="text" v-model="msg"> <p>Hello {{msg}}</p> <p>Hello {{msg.toUpperCase()}}</p> <img src="imgUrl"> <img v-bind:src="imgUrl"> <img :src="imgUrl"> <h1>指令二.绑定事件监听</h1> <button v-on:click="test">test按钮</button> <button @click="test2(msg)">test2按钮</button> </div> <script type="text/javascript" src="/vue/vue.js"></script> <script type="text/javascript" > const vm=new Vue({ el:'#app', data:{ msg:'', imgUrl:'https://imgoss.ilive.cn/image/202104/13/1618302927248_365x204.jpg' }, methods:{ test(){ alert('test按钮') }, test2(content){ alert(content) }, } })
3.计算属性和监视
1.计算属性
在computed属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果
2.监视属性:
通过通过vm对象的$watch()或watch配置来监视指定的属性当属性变化时,回调函数自动调用,在函数内部进行计算
3.计算属性高级:
通过getter/setter实现对属性数据的显示和监视计算属性存在缓存,多次读取只执行一次getter计算
computed
<div id="app"> <input type="text" v-model="msg1"> <input type="text" v-model="msg2"> <input type="text" v-model="msg3"> </div> <script type="text/javascript" src="/vue/vue.js"></script> <script type="text/javascript" > const vm=new Vue({ el:'#app', data:{ msg1:'1', msg2:'2', }, computed:{ msg3(){ return this.msg1+this.msg2 } } }) </script>
watch
<div id="app"> <input type="text" v-model="msg1"> <input type="text" v-model="msg2"> <input type="text" v-model="msg3"> <input type="text" v-model="msg4"> </div> <script type="text/javascript" src="/vue/vue.js"></script> <script type="text/javascript" > const vm=new Vue({ el:'#app', data:{ msg1:'1', msg2:'2', }, computed:{ msg3(){ return this.msg1+this.msg2 } }, watch:{ msg1:function(value){ this.msg4=value+' '+this.msg2; } } }) vm.$watch('msg2',function(value){ this.msg4=this.msg1+' '+value }) </script>
给两个加上watch
这篇关于vue的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist