![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 55
言人冰
这个作者很懒,什么都没留下…
展开
-
9.条件渲染
条件渲染1.v-if写法:(1).v-if=“表达式”(2).v-else-if=“表达式”(3).v-else=“表达式”适用于:切换频率较低的场景。特点:不展示的DOM元素直接被移除。注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。2.v-show写法:v-show=“表达式”适用于:切换频率较高的场景。特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉【底层是操控display实现】3.备注:使用v-if的时,元素可能无法原创 2022-04-04 15:46:47 · 334 阅读 · 0 评论 -
8.绑定class样式和style样式
绑定样式:class样式写法:class=“xxx” xxx可以是字符串、对象、数组。字符串写法适用于:类名不确定,要动态获取。对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。style样式:style="{fontSize: xxx}“其中xxx是动态值。:style=”[a,b]"其中a、b是样式对象(样式对象即CSS中存在的属性)。注意:实际开发中绑定class样式较多<!DOC原创 2022-04-04 15:16:46 · 181 阅读 · 0 评论 -
7.监视属性watch
天气切换案例<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>天气案例</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <原创 2022-04-03 18:24:31 · 679 阅读 · 0 评论 -
6.计算属性
计算属性: 1.定义:要用的属性不存在,要通过已有属性计算得来。 2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。 3.get函数什么时候执行? (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。 4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。 5.备注: 1.计算属性最终会出现在vm上,直接读取使用即可。原创 2022-02-20 13:28:30 · 249 阅读 · 0 评论 -
4. Vue中的数据代理
点击查看<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法</title> </head> <body> <script type="text/javascript" > let number = 18 let person = { nam原创 2022-02-11 18:37:00 · 103 阅读 · 0 评论 -
4.MVVM模型
MVVM模型观察发现:1.data中所有的属性,最后都出现在了vm身上。2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。原创 2022-02-11 17:27:50 · 322 阅读 · 0 评论 -
3.el和data的两种写法
el 和 data 的两种写法在这里插入代码片 <div id="root"> <h2>你好,{{name}}</h2> </div>el第一种写法是new Vue时候配置el属性。<script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:原创 2022-02-11 16:37:50 · 258 阅读 · 0 评论 -
2.Vue的2种数据绑定方式
Vue的2种数据绑定方式单项数据绑定【v-bind】数据只能由data流向页面双向数据绑定【v-model】数据既能由data流向页面,又能由页面流向data备注:1.双向绑定一般都应用在表单类元素上(如:input、select等)2.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。<!DOCTYPE html><html> <head> <meta charset="UTF-8原创 2022-02-11 14:05:54 · 375 阅读 · 0 评论 -
1.Vue模板语法有2大类(插值语法和指令语法)
Vue模板语法有2大类: 1.插值语法: 功能:用于解析标签体内容。 写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。 2.指令语法: 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。 举例:v-bind:href="xxx" 或 简写为 :href="xxx",xxx同样要写js表达式, 且可以直接读取到data中的所有属性。 备注:Vue中有很多的指令,且原创 2022-02-11 00:45:30 · 293 阅读 · 0 评论 -
初识Vue
初识Vue引入Vue<script type="text/javascript" src="../js/vue.js"></script>准备好一个容器 <div id="demo"> <h1>Hello,{{name.toUpperCase()}},{{address}}</h1> </div>创建Vue实例 <script type="text/javascript" > Vue.co原创 2022-02-11 00:44:31 · 163 阅读 · 0 评论 -
Vue简介
Vue简介vue-cli 即vue脚手架,专门做工程化开发vue-router 用于做前端路由vuex帮我们保管数据element-ui 为ui组件库???什么是Vue动态构建用户界面的渐进式 JavaScript 框架1.1.3. Vue 的特点遵循 MVVM 模式编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发它本身只关注 UI, 也可以引入其它第三方库开发项目...原创 2022-02-09 16:35:23 · 569 阅读 · 0 评论