Vue基础

第一个Vue程序

<div id="app">{{message}}  //显示为Hello Vue!
</div>

var app = new Vue({el:'#app',data:{message:'Hello Vue!'}
})

el：挂载点

1.el选中的元素的内部与data中对象匹配的属性名都会被渲染
<div id="app">{{message}}  //显示为Hello Vue!<span>{{message}}</span>   //也会被渲染
</div>2.也可以选择类选择器，元素选择器
<div class="app">{{message}}  //显示为Hello Vue!
</div>3.只能支持双标签<div></div>,<p></p>
不能挂载body,html标签上

data：数据对象

var app = new Vue({el:'#app',data:{message:'Hello Vue!',obj:{name:"zhangsan",mobile:"xxxxx"},arr:["aaa","bbb"]}
})

<div id="app">{{message}}{{obj.name}} {{obj.mobile}}{{arr[0]}}  {{arr[1]}}
</div>

Vue指令

v-text

等同于innertext
<div id="app"><h2 v-text="message"></h2>//会替换掉h2中所有的文本值<h2>xxx{{message}}</h2> //替换插入部分的值//也可以使用字符串拼接<h2 v-text="message+'!'"></h2>
</div>

v-html

等同于innerhtml
方法同上

v-on

<div id="app"><input type="button" value="事件绑定" v-on:click="doIt"><input type="button" value="事件绑定" v-on:mouseenter="doIt"><input type="button" value="事件绑定" v-on:dblclick="doIt"><input type="button" value="事件绑定" @dblclick="doIt"><h2 @click="change">{{food}}</h2>     </div>

var app=new Vue({el:"#app",data:{food:"xxx"},methods:{doIt:function(){console.log(111)},change:function(){console.log(this.food)this.food+='111'}}
})

计数器案例

var app = new Vue({el: ".input-num",data: {num: 1},methods: {add: function() {this.num++;},sub: function() {this.num--;}}
});

<div class="input-num"><button @click="sub">-</button><span>{{ num }}</span><button @click="add">+</button>
</div>

v-show

根据表达式的真假，切换元素的显示与隐藏
<div id="app"><img src="地址" v-show="true"><img src="地址" v-show="isShow"><img src="地址" v-show="age>=18">
</div>
var app = new Vue({el:"#app",data:{isShow:false,age:16}
})

v-if

根据表达式的真假，切换元素的显示与隐藏（操作dom元素），
使用方法同上
设置v-if为false时，直接将元素从html中删除了，
而v-show是改变元素的样式，即display:none;

v-bind

设置元素的属性（如：src，title，class）
动态绑定元素的属性
v-bind:属性名=表达式
简写   :
<img :src="imgSrc" :title="imgTitle+'!!!'"><img :class="{active:isActive}">
data:{isActive:true
}

图片切换案例

<div id="app"><img :src="imgArr[index]"><a href="#" @click="prev" v-show="index!=0">上一张</a><a href="#" @click="next" v-show="index!=1">下一张</a>
</div>

var app = new Vue({el:"#app",data:{imgArr:["xxx","xxx"],index:0},methods:{prev:function(){this.index--;},next:function(){this.index++;}}
})

v-for

根据数据生成列表结构

<div id="app"><ul><li v-for="item in arr">{{item}}</li><li v-for="(item,index) in arr">{{index}} {{item}}</li><li v-for="item in obj">{{item.name}}</li></ul>
</div>

var app=new Vue({el:"#app",data:{arr:["zhangsan","lisi"],obj:[{name:"xxx"},{name:"xxx"}]}
})

v-on补充

传递自定义参数

<input @click="doIt(666,'xx')">methods:{doIt:function(p1,p2){console.log()}
}

事件修饰符

//用户敲击回车时弹出
<input type="text" @keyup.enter="sayHi">methods:{sayHi:function(){console.log()}
}

v-model

获取和设置表单元素的值(双向绑定)

<input type="text" v-model="message">
<h2>{{message}}
</h2>
//同步发生改变
data:{message:"xxx"
}

Vue基础及一些常用指令相关推荐

Redis基础概念数据类型常用指令 Jedis 持久化
Redis基础概念数据类型常用指令 Jedis 持久化 1. Redis 简介 1.1 NoSQL概念 1.1.1 问题现象 1.1.2 NoSQL的概念 1.2 Redis概念 1.2.1 r ...
vue input file onchange_vue常用指令汇总
在我们对比vue与react的时候,会发现一个很明显的特点,react的写法很自由,用js来搞定一切,而vue的模版语法提供了一套相对固定的模式来书写页面,vue的优势在于这些特性帮助我们简化了代码, ...
vue.js语法和常用指令
如果已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创 ...
vue 快速入门、常用指令（1）
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 官方网站中文:https://cn.vuejs. ...
RD基本功——Vi基础与最常用指令
写在前面:作为常年与服务器.Linux打交道的后端开发RD,基本的vi操作是一定要运用非常熟练的:本篇文章就记录了一些日常工作中最常用的的指令,希望能和大家共同学习共同进步~ 一.vi与vim的区别 ...
Vue基础笔记脚手架、指令、语法
Vue简介 Vue,渐进式jsvasript框架,一套拥有自己规则的语法渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用库: 封装的属性或方法 (例jquery.js) 框架: 拥有自己的规 ...
VUE基础、表达式和指令
1.Vue实例挂载(el)的标签每个Vue实例通过el配置挂载的标签,该标签可以通过id或者是class挂载. 实例上的属性和方法只能够在当前实例挂载的标签中使用. <div id=" ...
Vue2.0开发之——Vue基础用法-内容渲染指令(16)
一概述指令的概念内容渲染指令介绍二指令的概念指令(Directives)是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构 vue中的指令按照不同的用途,可以分为如下6大类 ...
Linux基础入门（常用指令总结）
相信大家对Linux都不陌生,本篇文章就详细介绍一些常用的Linux命令目录前言一.Linux是什么? 二.常用命令 1.cd 切换文件夹 2.ls 查看目录内容 3.mkdir 创建文件夹 4 ...
汇编基础--寄存器与常用指令
汇编是面向CPU的一种语言,是CPU机器码的人类语言描述. CPU 运算需要依赖于寄存器与内存,其中寄存器用于暂时存放CPU在运算中得到的结果,随后在按照需求选择是否放入内存或者继续参与其它的运算.寄 ...

Vue基础及一些常用指令

Vue基础

第一个Vue程序

el：挂载点

data：数据对象

Vue指令

v-text

v-html

v-on

计数器案例

v-show

v-if

v-bind

图片切换案例

v-for

v-on补充

v-model

Vue基础及一些常用指令相关推荐

最新文章

热门文章