vue指令(组件)的基本使用一
2018-01-19 11:06
846 查看
接触过angular 的小伙伴们可能觉得学起vue的指令更加简单(个人认为),因为很相似,但一些语法略有不同,记录一下遇到的问题
首先来说一下vue2.0以后很多语法发生变化,但我们往往搜索到的文章是用1.0的语法,这时可能就要多注意一下新语法是如何写的;例如 v-for 的index属性,在之前是$index,
但你在2.0中使用就会报$index is not defined;
一、v-for
<ul>
<li @click="toggle(tab.view,index)" v-for="tab in tabs" v-bind:class="{active: index==active}">
{{tab.type}}
</li>
<ul/>
解决了$index,发现还是报错,语法写的有问题,index也找不到;后来想到是不是没有引入index,解决
<ul>
<li @click="toggle(tab.view,index)" v-for="(tab,index) in tabs" v-bind:class="{active: index==active}">
{{tab.type}}
</li>
<ul/>
犯这个错误可能是受angular 影响,我记得 angular的ng-repeat 的$index并不需要引入,注意吧;
v-for 除了这种写法,还可以是v-for="((key,value)) in tabs" 与angular 类似;
二、v-bind:class 或:class
1、对象语法
支持某个css实现与否,值为boolean值,true或false,等同ng-class v-bind:class="{active: index==active}",支持多个class属性v-bind:class="{active: index==active,name:true(或者boolean变量)}"
2、数组语法(官网)-没用过
<div
v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass:
'active',
errorClass:
'text-danger'
}
三、v-bind:src 图片路径 这里vue2.0和1有区别,注意(1.0为src)
四、v-style(官网)与na-class雷同
1、对象语法
<div
v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {activeColor:
'red',fontSize:
30}
或者另外的更好
<div
v-bind:style="styleObject"></div>
data: {styleObject:
{color:
'red',fontSize:
'13px'}}
2、数组语法
<div
v-bind:style="[baseStyles, overridingStyles]"></div>
多个数组对象
五、v-if \v-show 区别无非一个是移除元素,一个是display:none,值都为boolean值
六、v-on:click (还有其他)等事件
七、绑定基本数据 {{}}与angular 相似,出现加载{{}}问题,angular 用ng-bind=""绑定,vue 我还没试,貌似有cloak方法
八、表单组件
v-model 与ng-model 类似, 绑定data,即可实现双向绑定;
九、过滤器
用于对数据进行处理(有全局和局部两种)
1、局部(用|)
{{ message | capitalize }}
你可以在一个组件的选项中定义本地的过滤器
filters: {
capitalize:
function (value)
{
if
(!value) return
''
value = value.toString()
return
value.charAt(0).toUpperCase()
+ value.slice(1)
}
}
也可实现函数传参
{{ message | filterA('arg1', arg2) }}
全局过滤器还没用到;就这些吧,都是基础了;
首先来说一下vue2.0以后很多语法发生变化,但我们往往搜索到的文章是用1.0的语法,这时可能就要多注意一下新语法是如何写的;例如 v-for 的index属性,在之前是$index,
但你在2.0中使用就会报$index is not defined;
一、v-for
<ul>
<li @click="toggle(tab.view,index)" v-for="tab in tabs" v-bind:class="{active: index==active}">
{{tab.type}}
</li>
<ul/>
解决了$index,发现还是报错,语法写的有问题,index也找不到;后来想到是不是没有引入index,解决
<ul>
<li @click="toggle(tab.view,index)" v-for="(tab,index) in tabs" v-bind:class="{active: index==active}">
{{tab.type}}
</li>
<ul/>
犯这个错误可能是受angular 影响,我记得 angular的ng-repeat 的$index并不需要引入,注意吧;
v-for 除了这种写法,还可以是v-for="((key,value)) in tabs" 与angular 类似;
二、v-bind:class 或:class
1、对象语法
支持某个css实现与否,值为boolean值,true或false,等同ng-class v-bind:class="{active: index==active}",支持多个class属性v-bind:class="{active: index==active,name:true(或者boolean变量)}"
2、数组语法(官网)-没用过
<div
v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass:
'active',
errorClass:
'text-danger'
}
三、v-bind:src 图片路径 这里vue2.0和1有区别,注意(1.0为src)
四、v-style(官网)与na-class雷同
1、对象语法
<div
v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {activeColor:
'red',fontSize:
30}
或者另外的更好
<div
v-bind:style="styleObject"></div>
data: {styleObject:
{color:
'red',fontSize:
'13px'}}
2、数组语法
<div
v-bind:style="[baseStyles, overridingStyles]"></div>
多个数组对象
五、v-if \v-show 区别无非一个是移除元素,一个是display:none,值都为boolean值
六、v-on:click (还有其他)等事件
七、绑定基本数据 {{}}与angular 相似,出现加载{{}}问题,angular 用ng-bind=""绑定,vue 我还没试,貌似有cloak方法
八、表单组件
v-model 与ng-model 类似, 绑定data,即可实现双向绑定;
九、过滤器
用于对数据进行处理(有全局和局部两种)
1、局部(用|)
{{ message | capitalize }}
你可以在一个组件的选项中定义本地的过滤器
filters: {
capitalize:
function (value)
{
if
(!value) return
''
value = value.toString()
return
value.charAt(0).toUpperCase()
+ value.slice(1)
}
}
也可实现函数传参
{{ message | filterA('arg1', arg2) }}
全局过滤器还没用到;就这些吧,都是基础了;
相关文章推荐
- vue学习02 vue-cli 模板创建后的基本结构 及内容组件 指令
- vue 指令基本使用大全
- vue 指令基本使用
- vue基础--组件的基本使用
- 使用use注册Vue全局组件和全局指令的方法
- vue.js基本使用 父子组件<三>
- vue插件 使用use注册Vue全局组件和全局指令
- VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)
- vue 指令基本使用
- Vue基本使用二-指令
- 解决vue组件中使用v-for出现告警问题及v for指令介绍
- vue基本使用--refs获取组件或元素
- 使用use注册Vue全局组件和全局指令
- Android实训案例(六)——四大组件之一BroadcastReceiver的基本使用,拨号,短信,SD卡,开机,应用安装卸载监听
- vue+element ui 使用$refs获取el-dialog 下的 el-table 组件 ,以及使用table多选,默认选中
- 使用Vue开发网站之路1-单个组件的开发
- Vue 兄弟组件通信(不使用Vuex)
- vue.js入门(一)创建vue对象和常用指令及使用示例
- vue组件的开发使用-组件的创建