v-text

作用：渲染文本到标签上，跟JQuery的text()方法类似
直接上例子：

<script>var app = new Vue({el: "#app",data:{name:"张三先生",age: 30}});
</script>

<div id="app"><h4>{{name}}</h4><h4 v-text="name"></h4><h4 v-text="name+'，你好！'"></h4>
</div>

结果如下：

v-html

作用：渲染html代码到标签内容，跟JQuery的html()方法类似

var app = new Vue({el: "#app",data:{name:"<span style='color:red;'>张三先生</span>"}
});

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

运行后就会输出红色字体的张三先生，这里就不贴图了

v-on

作用：绑定dom元素各种事件，例如点击、双击等等。事件方法写在methods对象内部。
传参：vue的事件不需要传递参数，直接在事件内部操作data对象就行了
v-on事件可以简写为@

<div id="app"><input type="button" value="提示" v-on:click="test" /><input type="button" value="简写" @click="test" /><p>{{message}}<input type="button" value="点击改变内容" @click="changeData" /></p>
</div>

<script>var app = new Vue({el: "#app",data:{message:"今天天气不错"},methods:{test:function(){alert("这是一个提示信息！");},changeData:function(){this.message = "突然就下雨了";}}});
</script>

v-show

作用：根据表达式的返回值true/false，控制元素的显示和隐藏
原理：通过设置css的display属性来切换显示、隐藏

    <div id="app"><input type="button" value="切换" @click="change" /> <br /><img src="https://cn.vuejs.org/images/logo.png" v-show="isShow" /></div>

<script>var app = new Vue({el: "#app",data:{isShow: true},methods:{change:function(){this.isShow = !this.isShow;}}});
</script>

v-if

作用：和v-show一样，根据表达式的返回值true/false，控制元素的显示和隐藏
原理：通过操作dom的添加、移除来控制显示状态，注意当隐藏时整个dom元素都会被删除，这点和v-show是不同的。

v-bind

作用：为元素绑定属性值，例如src、title、class
写法是v-bind:属性名=""，可以简写为 :属性名=""

    <div id="app"><!--以下2种写法作用相同--><p v-bind:class="isActive ? 'active' : ''">这是一段文本</p><p v-bind:class="{active: isActive}">这是一段文本</p><input type="button" value="切换样式" @click="changeRed" /></div>

    <style>.active {color:red;}</style>

<script>var app = new Vue({el: "#app",data:{isActive: false},methods:{changeRed:function(){this.isActive = !this.isActive;}}});
</script>

v-for

作用：遍历数组生成对用的dom，比如用于ul-li生成、table-row生成

    <div id="app"><input type="button" value="增加" @click="add"> <br/><ul><li v-for="(item, index) in userList" :key="index">{{index}}：{{item.name}}</li></ul></div>

<script>var app = new Vue({el: "#app",data:{userList:[{ name: "张三" },{ name: "李四" },{ name: "王五" }]},methods:{add:function(){this.userList.push({ name: "宋六" });}}});
</script>

v-model

作用：表单元素数据的绑定，注意这是双向绑定。意思就是，表单控件值变了，则绑定的对象也会跟着变化；如果通过代码修改了对象值，则控件值也会同步变化。
v-model是vue业务开发的核心，涉及到页面提交的都会用到

 <!--效果，文本框输入值变化，下面h4内容跟着变--><div id="app"><input type="text" v-model="message" /><h4>{{message}}</h4></div>

<script>var app = new Vue({el: "#app",data:{message: "今天天气真好"}});
</script>

vue教程3：vue常用指令相关推荐

vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
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. ...
vue教程 pdf vue权威指南
在实战之前,你需要对vuejs的基础语法有一定的了解,可以通过以下几个途径进行学习: vue.js官方文档:https://cn.vuejs.org/v2/guide/index.html 官方的文档 ...
【Vue教程】Vue.js推文
为什么前端工程师的需求这么大我国手机用户超过13亿,活跃智能机用户超过23亿部,全国网民人数约7.51亿.这么多人,每天都有几十分钟或者几个小时,要使用手机上网.全体中国人一年消费的网页和 App ...
Vue 常用指令汇总
文章目录 1,vue简介 2,选择器:根据id.class等查找 3,静态绑定数据 data 4,插值 {{}}单项绑定 5,数据动态绑定:computed 6,数据双向绑定 :v-model 7,类 ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
VUE指令篇_不常用指令
标题没错,就是几个不常用指令,T_T,先来说一下什么是指令,vue的指令是指以 v- 为前缀,具有特殊含义.拥有特殊功能的特性,可以直接使用data中的数据 1.v-pre v-pre的作用是跳过这个 ...
Vue学习（入门实例、常用指令）-学习笔记
文章目录 Vue学习(入门实例.常用指令)-学习笔记实例常用指令 v-on v-bind v-for v-html v-if event v-model 双向数据绑定实现 - defineProp ...

vue教程3：vue常用指令

v-text

v-html

v-on

v-show

v-if

v-bind

v-for

v-model

vue教程3：vue常用指令相关推荐

最新文章

热门文章