有关VUE学习的经验（2）

接着上篇文章

一、有关VUE语法的相关学习（vue 版本3.0.4）
（1）{{}}：大胡子语法、插值语句

    <div>{{content}}</div>
复制代码

（2）内置指令

1、插值指令
（1）使用该指令进行标签中内容的替换区别：
v-text只是将content中的信息全以文本的方式显示
v-html只是将content中的信息进行渲染的方式显示
（2）v-html中如果存在标签就会渲染出来

    //content:"<a href="#">跳转</a>"v-text<sapn v-text="content"></span>//经过渲染后<span></span>v-html<span v-html="content"></span>
复制代码

2、控制指令

    v-ifv-else-ifv-else//v-if是通过控制元素添加删除实现显示隐藏<div v-if="bool1">tmo</div><div v-else-if="bool2">jack</div><div v-else="bool3">lily</div>v-show//v-show是通过控制元素的dispaly属性控制显示隐藏<div v-show="bool">jhon</div>
复制代码

3、属性指令
（1）通过该指令可以绑定元素的属性
形式：v-bind:"属性名"="模型变量"

    //v-bind<div v-bind:class="myClass">kid</div>//简写<div :class="myClass">kid</div>复制代码

4、事件绑定指令
形式：v-on:"事件名"="方法名()" 此处的括号可加可不加

    <div v-on:click="myMethod()"></div>//简写<div @click="myMethod()"></div>//绑定的事件里面的括号可以写也可以不写，本人推荐还是写
复制代码

5、修饰符（官网还有许多修饰符）
形式：v-on:"事件名"."修饰符"="方法名()"

    <form v-on:submit.prevent="mySubmit()"></form>
复制代码

6、v-for
（1）通过循环遍历数组，生成多个相同列表项
7、v-model
8、侦听属性
9、计算属性
备注

    //指令当中允许使用表达式<div v-bind:style="'margin-top:'+num+'px'"></div>
复制代码

（3）组件（4）路由（5）过渡动画（6）自定义指令

有关VUE学习的经验（2）相关推荐

Vue学习(一)-邂逅Vuejs
Vue学习(一)- 邂逅Vuejs 零.视频链接一.邂逅Vuejs 1.认识Vuejs 1.1 为什么学习Vuejs 1.2 简单认识一下Vuejs 2.Vuejs安装方式 2.1 CDN引入 2. ...
ant design vue table 高度自适应_2年Vue项目实战经验汇总！
前言 vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,由于其轻量和自底向上的渐进式设计思想,使其不仅仅被应用于PC系统,对于移动端,桌面软件(electronjs)等也有广泛的应用,与 ...
vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习文章目录 vue学习笔记-01-前端的发展历 ...
新书上市 | Vue 3.0 核心源码解析，这本书给Vue学习提供新方法
Vue.js 作为一款极简的 MVVM 框架,因其轻量.易上手,得到了众多开发者的喜爱. 自从 2014 年 Vue 诞生以来,这个框架设计的初衷,尤大说只是为了设计一个让自己用起来舒服的框架,随着受 ...
2年vue项目实战经验汇总
前言 vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,由于其轻量和自底向上的渐进式设计思想,使其不仅仅被应用于PC系统,对于移动端,桌面软件(electronjs)等也有广泛的应用,与 ...
Vue学习——【第二弹】
前言上一篇文章 Vue学习--[第一弹] 中我们学习了Vue的相关特点及语法,这篇文章接着通过浏览器中的Vue开发者工具扩展来进一步了解Vue的相关工作机制. Vue的扩展我们打开Vue的官方文档 ...
Vue学习系列-01-最详细学习过程(满满干货)
文章目录前言 VUE学习系列01 一.Vue.js的安装方式一:直接CDN引入方式二:下载和引入方式三:NPM安装二.与原生js,jq的区别 1.范式通俗解释: 2.声明式编程的优点三. ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...

有关VUE学习的经验（2）

接着上篇文章

有关VUE学习的经验（2）相关推荐

最新文章

热门文章