Vue学习
白茶.清欢
白茶清欢无别事,我在等风也等你。
展开
-
09 监视属性
1. 天气案例计算属性实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>VUE复习</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script></head><body原创 2021-07-31 11:35:53 · 149 阅读 · 0 评论 -
08 计算属性
1. 姓名案例_插值语法实现<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>姓名案例_插值语法实现</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <b原创 2021-07-23 14:36:55 · 199 阅读 · 0 评论 -
07 事件处理
1. 事件的基本使用事件的基本使用:1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;2.事件的回调需要配置在methods对象中,最终会在vm上;3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;5.@click=“demo” 和 @click="demo(event)"效果一致,但后者可以传参;其中event)" 效果一致,但后者可以传参;其中even原创 2021-07-23 14:26:29 · 212 阅读 · 0 评论 -
06 Vue数据代理
1.回顾Object.defineProperty方法<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法</title> </head> <body> <script type="text/javascript" > let number = 18原创 2021-07-23 12:43:19 · 176 阅读 · 0 评论 -
05 MVVM模型
MVVM模型M:模型(Model) :data中的数据V:视图(View) :模板代码VM:视图模型(ViewModel):Vue实例观察发现:1.data中所有的属性,最后都出现在了vm身上。2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>理解MVVM</.原创 2021-07-23 12:32:19 · 161 阅读 · 0 评论 -
04 data与el的2种写法
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实例了。箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,argument原创 2021-07-23 12:27:53 · 172 阅读 · 0 评论 -
03数据绑定
Vue中有2种数据绑定的方式:1.单向绑定(v-bind):数据只能从data流向页面。2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。备注:1.双向绑定一般都应用在表单类元素上(如:input、select等)2.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。3.v-bind:可以简写为:<!DOCTYPE html><html> <head> &l原创 2021-07-23 12:08:38 · 427 阅读 · 0 评论