码迷,mamicode.com
首页 > Web开发 > 详细

VUE.js入门学习(1)-基础精讲

时间:2018-06-06 15:41:32      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:size   dex   表达式   img   key   inf   模版   条件   htm   

1、VUE 实例 - 一个项目是有很多的vue实例拼装的。每一个组建就是vue的实例。

var vm = new Vue()

2、VUE 实例生命周期钩子

生命周期函数:VUE实例在某一个时间点会自动执行的函数

技术分享图片

3、VUE  的模版语法

{{content}}、v-text="文字"、v-html="代码"

4、计算属性,方法与侦听器 (重要)

(1)计算属性 computed 有一个缓存,变量不变他不变

技术分享图片

 (2)侦听器 watch  也有缓存机制

技术分享图片

 二者可以同时使用时。我们推荐用computed

5、计算属性的 getter 和 setter

技术分享图片

 6、Vue中的样式绑定

(1):class="js表达式"

技术分享图片

 (2):class="[one,two]"

技术分享图片

 (3) :style="object"

技术分享图片

 (4):style="[object,{font-size:12px}]"

技术分享图片

 7、Vue中的条件渲染  

(1)v-if=""      就不存在了

(2)v-show="" 相当于 display:none的效果

8、Vue中的列表渲染

(1)v-for=" (item,key,index) of list"  :key="item.id"

(2)模版占位符,在前台不显示,比div好

技术分享图片

 9、Vue中的set方法

(1)全局方法

技术分享图片

 (2)实例方法

技术分享图片

 (3)用set方法改变数组

Vue.set(数组名,第几位,改的数值)

vm.$set(数组名,第几位,改的数值)

 

VUE.js入门学习(1)-基础精讲

标签:size   dex   表达式   img   key   inf   模版   条件   htm   

原文地址:https://www.cnblogs.com/chengmingxiaowu/p/9144571.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!