这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
Vue.js 是当下很火的一个 JavaScript MVVM 库,它是以数据驱动和组件化的思想构建的。相比于 Angular.js,Vue.js 提供了更加简洁、更易于理解的 API,使得我们能够快速地上手并使用 Vue.js。下面这篇文章主要给大家介绍了关于 vue.js 使用的相关总结, 需要的朋友可以参考借鉴。
一、Vue.js 组件
vue.js 构建组件使用
- Vue.component('componentName', {
- /*component*/
- });
这里注意一点,组件要先注册再使用,也就是说:
- Vue.component('mine',{
- template:'#mineTpl',
- props:['name','title','city','content']
- });
- var v=new Vue({
- el:'#vueInstance',
- data:{
- name:'zhang',
- title:'this is title',
- city:'Beijing',
- content:'these are some desc about Blog'
- }
- });
如果反过来会报错,因为反过来代表先使用了组件的,但是组件却没注册。
webpack 报错后,使用
可以排错
- webpack --display-error-details
二、指令 keep-alive
在看 demo 的时候看到在 vue-router 写着
,
- keep-alive
的含义:
- keep-alive
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个
指令
- keep-alive
- <component :is='curremtView' keep-alive>
- </component>
三、如何让 CSS 只在当前组件中起作用
在每一个 vue 组件中都可以定义各自的 css,js,如果希望组件内写的 css 只对当前组件起作用,只需要在 style 中写入 scoped,即:
- <style scoped>
- </style>
四、vuejs 循环插入图片
在写循环的时候,写入如下代码:
- <div class="bio-slide" v-for="item in items">
- <img src="{{item.image}}">
- </div>
此时在控制台会出现警告
这里意思是在 "src" 属性插值将导致 404 请求。使用
- [Vue Warn]: src="{{item.image}}": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead.
代替。
- v-bind:src
所以替换成如下:
- <div class="bio-slide" v-for="item in items">
- <img v-bind:src="item.image">
- </div>
这里需要主要,v-bind 在写的时候不能再用 {{}},根据官方的说法:
- <a v-bind:href="url" rel="external nofollow">
- </a>
这里 href 是参数,它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。可能你已注意到可以用特性插值
获得同样的结果:这样没错,并且实际上在内部特性插值会转为 v-bind 绑定。
- href="{{url}}" rel="external nofollow"
五、绑定 value 到 Vue 实例的一个动态属性上
对于单选按钮,勾选框及选择框选项,v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值):
- <!-- `toggle` 为 true 或 false -->
- <input type="checkbox" v-model="toggle">
但是有时候想绑定 value 到 vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串。例如绑定 Checkbox 的 value 到 vue 实例的一个动态属性:
- <input
- type="checkbox"
- v-model="toggle"
- v-bind:true-value="a"
- v-bind:false-value="b">
- <p>{{toggle}}</p>
这里绑定后,并不是说就可以点击后由 true,false 的切换变为 a,b 的切换,因为这里定义的动态 a,b 是 scope 上的 a,b,并不能直接显示出来,此时
- //当选中时
- vm.toggle === vm.a
- //当没选中时
- vm.toggle === vm.b
所以此时需要在 data 中定义 a,b,即:
- new Vue({
- el:'...',
- data:{
- a:'a',
- b:'b'
- }
- });
六、片段实例
下面几种情况会让实例变成一个片断实例:
或 vue-router 的
- <partial>
。
- <router-view>
或
- v-if
。
- v-for
这些情况让实例有未知数量的顶级元素,它将把它的 DOM 内容当作片断。片断实例仍然会正确地渲染内容。不过,它没有一个根节点,它的 $el 指向一个锚节点,即一个空的文本节点(在开发模式下是一个注释节点)。
但是更重要的是,组件元素上的非流程控制指令,非 prop 特性和过渡将被忽略,因为没有根元素供绑定:
- <!-- 不可以,因为没有根元素 -->
- <example v-show="ok" transition="fade">
- </example>
- <!-- props 可以 -->
- <example :prop="someData">
- </example>
- <!-- 流程控制可以,但是不能有过渡 -->
- <example v-if="ok">
- </example>
片段实例也有用处,但是通常情况下组件有一个根节点比较好,它会保证组件元素上的指令和特性能正确的转换,同时性能也稍微好些。
七、路由嵌套
路由嵌套会将其他组件渲染到该组件内,而不是进行整个页面跳转 router-view 本身就是将组件渲染到该位置,想要进行页面跳转,就要将页面渲染到根组件,在起始配置路由时候写到:
- var App = Vue.extend({
- root
- });
- router.start(App, '#app');
这里首先将根组件注册进来,用于将路由中配置好的各个页面渲染出来,然后将根组件挂载到与 #app 匹配的元素上。
八、实现多个根据不同条件显示不同文字的方法
,
- v-if
可以实现条件选择,但是如果是多个连续的条件选择,则需要用到计算属性 computed。例如实现当输入框中什么都没写的时候显示字符串'empty', 否则显示输入框中的内容,代码如下:
- v-else
- <div id="test">
- <input type="text" v-model="inputValue">
- <h1>{{changeVaule}}</h1>
- </div>
- new Vue({
- el:'#test',
- data:{
- changeVaule:'123'
- },
- computed :{
- changeVaule:function(){
- if(this.inputValue!==''){
- return this.inputValue;
- }else{
- return 'empty';
- }
- }
- }
- });
九、Vuejs 在变化检测问题
1. 检测数组
由于 javascript 的限制,vuejs 不能检测到下面数组的变化:
直接索引设置元素,如
- vm.item[0]={};
修改数据的长度,如
。
- vm.item.length
为了解决问题 1,Vuejs 扩展了观察数组,为它添加一个
方法:
- $set()
- // 与 `example1.items[0] = ...` 相同,但是能触发视图更新
- example1.items.$set(0, {
- childMsg: 'Changed!'
- })
问题 2,需要一个空数组替换 items。
除了
,vuejs 也为观察数组添加了
- $set()
方法,用于从目标数组中查找并删除元素,在内部调用了
- $remove()
。
- splice()
因此,不必:
- var index = this.items.indexOf(item)
- if (index !== -1) {
- this.items.splice(index, 1)
- }
只需:
- this.items.$remove(item);
2. 检测对象
受 ES5 的显示,Vuejs 不能检测到对象属性的添加或删除。因为 Vuejs 在初始化时候将属性转化为
,所以属性必须在 data 对象才能让 Vuejs 转换它,才能让它是响应的,例如:
- getter/setter
- var data = {
- a: 1
- }
- var vm = new Vue({
- data: data
- })
- // `vm.a` 和 `data.a` 现在是响应的
- vm.b = 2
- // `vm.b` 不是响应的
- data.b = 2
- // `data.b` 不是响应的
不过,有办法在实例创建之后添加属性并且让它是响应的。对于 Vue 实例,可以使用
实例方法:
- $set(key,value)
- vm.$set('b', 2)
- // `vm.b` 和 `data.b` 现在是响应的
对于普通数据对象,可以使用全局方法
:
- Vue.set(object, key, value)
- Vue.set(data, 'c', 3)
- // `vm.c` 和 `data.c` 现在是响应的
有时你想向已有对象上添加一些属性,例如使用
或
- Object.assign()
添加属性。但是,添加到对象上的新属性不会触发更新。这时可以创建一个新的对象,包含原对象的属性和新的属性:
- _.extend()
- // 不使用 `Object.assign(this.someObject, { a: 1, b: 2 })`
- this.someObject = Object.assign({},
- this.someObject, {
- a: 1,
- b: 2
- })
十、关于 vuejs 页面闪烁 {{message}}
在 vuejs 指令中有 v-cloak,这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
- [v-cloak]{display:none}
用法如下:
- [v - cloak] {
- display: none;
- } < div v - cloak > {
- {
- message
- }
- } < /div>/
这样 <div> 不会显示,直到编译结束
十一、关于在 v-for 循环时候 v-model 的使用
有时候需要循环生成 input,用 v-model 绑定后,利用 vuejs 操作它,此时我们可以在 v-model 中写一个数组
,这样就可以给不同的 input 绑定不同的 v-model,从而分别操作他们。这个我在 demo 中的
- selected[$index]
中用到。
- dataBind.vue
十二、vuejs 中过渡动画
在 vuejs 中,css 定义动画:
- .zoom-transition{
- width:60%;
- height:auto;
- position: absolute;
- left:50%;
- top:50%;
- transform: translate(-50%,-50%);
- -webkit-transition: all .3s ease;
- transition: all .3s ease;
- }
- .zoom-enter, .zoom-leave{
- width:150px;
- height:auto;
- position: absolute;
- left:20px;
- top:20px;
- transform: translate(0,0);
- }
其中动画在定的时候要注意上下对应,上面有什么,下面有什么,都要变化的,如果有不变化的,应该抽离出去,作为公共 css 样式,在上面的 css 中,如果我只写
而不写下面的
- transform: translate(-50%,-50%);
则会导致上面的
- transform: translate(0,0);
被添加到下面,认为这个是不变的。
- transform: translate(-50%,-50%);
十三、指令 v-el 的使用
有时候我们想就像使用 jquery 那样去访问一个元素,此时就可以使用 v-el 指令,去给这个元素注册一个索引,方便通过所属实例的 $el 访问这个元素。
注意
html 不区分大小写,所以
将转换为全小写。可以用
- v-el:someEl
然后设置
- v-el:some-el
。
- this.$el.someEl
示例
- <span v-el:msg>
- hello
- </span>
- <span v-el:other-msg>
- world
- </span>
- this.$els.msg.textContent // -> "hello" this.$els.otherMsg.textContent
- // -> "world" this.$els.msg //->
- <span>
- hello
- </span>
十四、关于 vuejs 中使用事件名
在 vuejs 中,我们经常要绑定一些事件,有时候给 DOM 元素绑定,有时候给组件绑定。绑定事件在 HTML 中用
, 这时 evet 的名字不要出现大写,因为在 1.x 中不区分大小写,所以如果我们在 HTML 写
- v-on:click-"event"
而在 js 中写 myEvent 就出错误,所以在 vuejs 的 1.x 绑定事件时候,要尽量避免使用大写字母。在 2.0 中没有该限制!
- v-on:click="myEvent"
十五、v-if 与 v-show 的区别
v-if 直接不渲染这个 DOM 元素,而 v-show 是会渲染 DOM 元素,只是使用 display:none 隐藏,打开开发者工具可以看到该 DOM
十六、关于 transition 全局钩子如何在组件中使用
是定义一个全局 transition 钩子的,如果想针对组件定义,则需要如下写法:
- Vue.transition
- export
- default {
- transition:
- {
- 'fade':
- {
- enter() {},
- leave() {}
- }
- }
- }
这样 fade 这个过度钩子只会作用于组件内,如果同时有同名的全局钩子,则会优先使用组建定义的
十七、利用 vue-router 如何实现组件在渲染出来前执行某个事件
- export
- default {
- data() {
- return {
- selected:
- 0,
- currentView: 'view_0'
- }
- },
- methods: {
- choose(index) {
- this.selected = index;
- this.currentView = 'view_' + index;
- }
- },
- route: {
- data() {
- /*每次切换路由,在渲染出页面前都会执行*/
- }
- }
- }
总结
以上就是关于 vue.js 使用总结的全部内容了,希望本文的内容对大家学习或者使用 vue.js 能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0515/327807.html