Vue
文章平均质量分 51
彼岸的饭碗
我是面瘫 我还爱吃小熊饼干
展开
-
9.vue学习之小案例---微博发布框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .big{原创 2021-05-18 13:27:37 · 384 阅读 · 0 评论 -
8.vue学习之小案例----选项卡的制作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ mar原创 2021-05-18 11:54:27 · 169 阅读 · 0 评论 -
7.常用指令(下)v-on,v-bind,v-model的常见操作
v-onv-on的作用是给元素添加事件监听。可以简写为@我们学习的JavaScript的元素的事件监听都可以在VUE中使用原生的JavaScript事件监听事件名称方法点击onclick双击ondbclick鼠标移上onmouseenter鼠标离开onmouseleave鼠标滑过onmousemove鼠标移除onmouseout失去焦点onblur聚焦onfocus键盘事件onkeydown上表的方法都是原生原创 2021-05-14 17:15:45 · 295 阅读 · 0 评论 -
6.常用指令(上)v-cloak,v-once,v-pre
v-cloakv-cloak指令的作用是vue示例渲染后关联结束双大括号插值语法在遇到网络延迟的时候会显示编译前的文本<body> <div id="app"> <p>{{a}}</p> </div> <script src="vue.js"></script> <script> var vue=new Vue({ el原创 2021-05-14 10:27:11 · 195 阅读 · 0 评论 -
5.v-text与v-html常见操作
v-html与v-text都是渲染文本的指令,使用场景会有所不同。我们一般的渲染方法是:双大括号插值:{{}}v-textv-html浅谈v-text其中双大括号与v-text渲染内容类似,都是以文本类型进行编译。<p>{{a}}</p><p v-text="a"></p>结果:v-text与双大括号的区别双大括号在渲染结果之前,隐约会有编译之前的文本显示,v-text是没有这种现象的。双大括号更灵活,中间是可以添加内容的原创 2021-05-14 08:57:49 · 193 阅读 · 0 评论 -
4.vue常见指令v-for的基本使用
v-for是vue的循环指令,它的作用是遍历数组(对象)的每一个值<body> <div id="app"> <ul> <li v-for="item in arr"> {{item}} </li> </ul> </div> <script src="vue.js"></原创 2021-05-13 21:22:45 · 1686 阅读 · 0 评论 -
3.Vue的常用指令之v-if与v-show
1.指令directivevue指令的作用是通过带有v-的特殊属性,实现对dom的响应式加载2.v-ifv-if的作用是通过一个布尔表达式对dom的上树与下树的渲染基本使用:<p v-if="false">我是第一行dom元素</p><p v-if="true">我是第二行dom元素</p>但是通常工作中不是使用布尔值直接进行渲染的,而是通过data带有布尔值的表达式进行判断。<body> <div id="app原创 2021-05-13 17:49:33 · 286 阅读 · 0 评论 -
2.Vue的插值语法
1.Vue的插值语法插值语法是通过{{}}进行书写,内部是对data数据管理中的属性进行渲染,也可以是表达式moustache(胡子)是对大括号的学名,也叫(胡子语法)实例内部也可以存放表达式{{a>=100 ? 20 :10}}表达式要尽量简单,比如简单判断,不可以用if语句...原创 2021-05-13 16:44:43 · 608 阅读 · 0 评论 -
1.Vue的基本使用
1.复制VUE源码,创建js打开网站https://cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88复制两个网站中的一个(其中一个是开发版本,一个是生产版本),全选,复制粘贴创建js文件,放到项目指定目录中2.HTML引入基本结构<body> <div id="app"> <h1> {{data}}</h1> </div>原创 2021-05-13 16:36:20 · 58 阅读 · 0 评论