Vue-基本语法和系统指令

Vue最简单小例子演示使用步骤：

1.导入Vue文件；

2.创建Vue实例对象，设置属性（el、data等等）；

3.使用模板语法把数据渲染到页面

<body><div id="app"><!--插值表达式-->{{message}}</div><!--导入Vue文件--><script src="vue-2.4.0.js"></script><script>//创建Vue实例对象var app = new Vue({//挂载点获取原生JS对象el:"#app",data:{message:"Hello Vue!"}})</script>
</body>

注意：

1.Vue实例对象中的属性用逗号隔开

2.data属性中定义各类数据

Vue系统指令

v-text：设置标签的文本值（textContent）

<div id="app"><h2 v-text="message">123</h2>    //第一种<h2>123{{message}}</h2>          //第二种
</div>

*第一种写法会覆盖元素内所有内容，但会替换标签中全部已有内容

*第二种为插值表达式，可以部分替换标签已有内容

v-html：设置标签的innerHTML

<div id="app"><p v-html="content"></p>
</div>

v-on：为元素绑定事件

<div id="app"><input type="button" value="IT" v-on:click="doIt" /><input type="button" value="IT" @click="doIt" /><input type="button" value="dbIT" @dblclick="doIt" /><input type="button" value="dbIT" @dblclick="flag=true" />
</div>

*第二种写法为简写，减少代码量

*第三种是双击事件

*第四种是直接在页面的事件内写语句，不过不推荐

具体用法需要搭配Vue实例对象中的methods属性使用：

*方法内部需要通过this关键字访问定义在data中的数据

<body><div id="app"><p2 @click="changeFood">{{food}}</p2></div><script src="vue.js"></script><script>var app = new Vue({el:"#app",data:{food:"兄弟们，"},methods:{changeFood:function(){this.food+="奥利给干啦！";}}})</script>
</body>

v-show：根据bool值切换元素显示/隐藏

*v-show内的值都会转换为bool类型

*可以在v-show内绑定函数，灵活操纵图片的显示

*v-show实质上是操纵元素的display属性

<div id="app"><img src="pic/1.jpg" v-show="true"/><img src="pic/2.jpg" v-show="age>=18"/><img src="pic/3.jpg" v-show="isShow"/><button @click="changeIsShow">修改可见状态</button>
</div><script>var app=new Vue({el:"#app",data:{isShow:false,age:18},methods:{changeIsShow:function(){this.isShow = !this.isShow;}}});
</script>

*第一种方法直接写死显示状态

*第二种方法将运算结果转换为bool值判断

*第三种方法绑定函数

v-if：根据bool值切换元素显示/隐藏（操纵dom元素）

*与v-show的区别：v-show只是在修改display属性，而v-if则是直接移除/添加元素

*v-if对性能消耗要大于v-show

v-bind：为元素绑定属性

写法：v-bind:属性名="属性值"，简写：:属性名="属性值"

<div id="app"><img v-bind:src="imgSrc"><img :src="imgSrc" :title="imgTitle+'!'" :class="isActive?'active':''" @click="toggleActive"><img :src="imgSrc" :title="imgTitle+'!'" :class="{active:isActive}" @click="toggleActive">
</div><script>var app = new Vue({el: "#app",data: {imgSrc: "pic/3.jpg",imgTitle: "supreme",isActive:true},methods:{toggleActive:function(){this.isActive = !this.isActive;}}
});
</script>

*第二种写法是通过函数绑定，通过三元表达式判断bool值

*第三种写法是通过函数绑定，通过对象的方式判断bool值，提高可读性

v-for：根据数据的数量生成多个重复列表结构（遍历）

语法：v-for="(item,index) in arr" arr是数组名，item是数组中每个遍历的元素名，index是索引，二者都可以自己命名

<div id="app"><ul><li v-for="(item,index) in arr">{{item}}{{index}}</li></ul><h2 v-for="item in eight">{{item.name}}</h2>
</div><script>var app = new Vue({el:"#app",data:{arr:["老八","秘制","小汉堡儿"],//也可以以对象为数组元素eight:[{name:"臭豆腐"},{name:"俘虏"},{name:"柠檬"}]},});
</script>

补充：

v-for循环时，key属性必须用v-bind绑定的方式指定key的值

v-for循环时，key属性只能使用number获取string

v-model：获取和设置表单元素的值（双向数据绑定）

<div id="app"><input type="text" v-model="message"><h2>{{message}}</h2>
</div><script>var app = new Vue({el:"#app",data:{message:"猕Hotel"}});
</script>

Vue-基本语法和系统指令相关推荐

vue.js语法和常用指令
如果已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创 ...
Vue高级语法(一) | 自定义指令详解
文章目录 Vue中自定义指令
Vue系统指令（一）
Vue系统指令(一) 插值表达式 {{}} v-cloak v-text v-html v-bind:属性绑定机制 v-on:事件绑定机制 `v-on:click`:点击事件 `v-on`的简写形式 ...
Vue学习笔记之02-Mustache语法以及一些指令
Mustache语法又称大胡子语法就是用两个大括号来包裹变量从而挂钩Vue去解析里面的代码比如 <h2>{{message}}</h2><!-- Mustache ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
Vue -- 基础语法指令(v-bind，v-if，v-else，v-else-if，v-for）
文章目录 1. Vue--基础语法指令(v-bind,v-if,v-else,v-else-if,v-for) 1.1 v-bind 1.1.1 代码示例 1.1.2 运行结果 1.1.3 小结 1. ...
Vue3学习之旅--Vue3高级语法补充-自定义指令，vue插件，Teleport......
文章目录 Vue3高级语法补充自定义指令认识自定义指令实现方式一:默认实现实现方式二:局部自定义指令方式三:自定义全局指令指令的生命周期指令的参数和修饰符自定义指令练习时间格式化指令 ...
Vue基础笔记脚手架、指令、语法
Vue简介 Vue,渐进式jsvasript框架,一套拥有自己规则的语法渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用库: 封装的属性或方法 (例jquery.js) 框架: 拥有自己的规 ...
Vue Eslint语法检测工具
一.ESlint 简介 1. Lint 的含义如果你写自己的项目怎么折腾都没关系,但是在公司中老板希望每个人写出的代码都要符合一个统一的规则,这样别人看源码就能够看得懂,因为源码是符合统一的编码规范 ...

Vue-基本语法和系统指令

Vue系统指令

Vue-基本语法和系统指令相关推荐

最新文章

热门文章