一, 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'
- } 14 });</pre>
如果反过来会报错, 因为反过来代表先使用了组件的, 但是组件却没注册.
webpack 报错后, 使用 webpack --display-error-details 可以排错
二, 指令 keep-alive
在看 demo 的时候看到在 vue-router 写着 keep-alive,keep-alive 的含义:
如果把切换出去的组件保留在内存中, 可以保留它的状态或避免重新渲染. 为此可以添加一个 keep-alive 指令
</component></pre>
三, 如何让 CSS 只在当前组件中起作用
在每一个 vue 组件中都可以定义各自的 CSS,JS, 如果希望组件内写的 CSS 只对当前组件起作用, 只需要在 style 中写入 scoped, 即:
- 1 <input 2 type="checkbox"
- 3 v-model="toggle"
- 4 v-bind:true-value="a"
- 5 v-bind:false-value="b">
- 6 <p>{
- {
- toggle
- }
- }</p></pre>
这里绑定后, 并不是说就可以点击后由 true,false 的切换变为 a,b 的切换, 因为这里定义的动态 a,b 是 scope 上的 a,b, 并不能直接显示出来, 此时
- 1 // 当选中时
- 2 vm.toggle === vm.a 3 // 当没选中时
- 4 vm.toggle === vm.b</pre>
所以此时需要在 data 中定义 a,b, 即:
- new Vue({
- el:'...',
- data:{
- a:'a',
- b:'b'
- }
- });</pre>
六, 片段实例
下面几种情况会让实例变成一个片断实例:
模板包含多个顶级元素.
模板只包含普通文本.
模板只包含其它组件(其它组件可能是一个片段实例).
模板只包含一个元素指令, 如 < partial> 或 vue-router 的 <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 本身就是将组件渲染到该位置, 想要进行页面跳转, 就要将页面渲染到根组件, 在起始配置路由时候写到:
这里首先将根组件注册进来, 用于将路由中配置好的各个页面渲染出来, 然后将根组件挂载到与 #App 匹配的元素上.
八, 实现多个根据不同条件显示不同文字的方法
v-if,v-else 可以实现条件选择, 但是如果是多个连续的条件选择, 则需要用到计算属性 computed. 例如实现当输入框中什么都没写的时候显示字符串'empty', 否则显示输入框中的内容, 代码如下:
- 1 <div id="test">
- 2 <input type="text" v-model="inputValue">
- 3 <h1>{{changeVaule}}</h1>
- 4 </div>
- 5 new Vue({ 6 el:'#test',
- 7 data:{
- 8 changeVaule:'123'
- 9 },
- 10 computed :{
- 11 changeVaule:function(){
- 12 if(this.inputValue!==''){
- 13 return this.inputValue;
- 14 }else{
- 15 return 'empty';
- 16 }
- 17 }
- 18 }
- 19 });</pre>
- }// 欢迎加入全栈开发交流圈一起学习交流: 582735936
- ]// 面向 1-3 年前端人员
- ```
九, vuejs 在变化检测问题
1. 检测数组
由于 JavaScript 的限制, vuejs 不能检测到下面数组的变化:
直接索引设置元素, 如 vm.item[0]={};
修改数据的长度, 如 vm.item.length.
为了解决问题 1,Vuejs 扩展了观察数组, 为它添加一个 $set()方法:
- // 与 example1.items[0] = ... 相同, 但是能触发视图更新
- example1.items.$set(0, { childMsg: 'Changed!'})</pre>
问题 2, 需要一个空数组替换 items.
除了 $set(),vuejs 也为观察数组添加了 $remove()方法, 用于从目标数组中查找并删除元素, 在内部调用了 splice() .
因此, 不必:
- var index = this.items.indexOf(item)
- if (index !== -1) {
- this.items.splice(index, 1)
- }</pre>
只需:
- 1 this.items.$remove(item);</pre>
2. 检测对象
受 ES5 的显示, Vuejs 不能检测到对象属性的添加或删除. 因为 Vuejs 在初始化时候将属性转化为 getter/setter, 所以属性必须在 data 对象才能让 Vuejs 转换它, 才能让它是响应的, 例如:
- var data = { a: 1 }
- var vm = new Vue({
- data: data
- })
- // vm.a 和 data.a 现在是响应的
- vm.b = 2
- // vm.b 不是响应的
- data.b = 2
- // data.b 不是响应的</pre>
不过, 有办法在实例创建之后添加属性并且让它是响应的. 对于 Vue 实例, 可以使用 $set(key,value)实例方法:
- vm.$set('b', 2)
- // vm.b 和 data.b 现在是响应的</pre>
对于普通数据对象, 可以使用全局方法 Vue.set(object, key, value) :
- Vue.set(data, 'c', 3)
- // vm.c 和 data.c 现在是响应的</pre>
有时你想向已有对象上添加一些属性, 例如使用 Object.assign()或_.extend()添加属性. 但是, 添加到对象上的新属性不会触发更新. 这时可以创建一个新的对象, 包含原对象的属性和新的属性:
- // 不使用 Object.assign(this.someObject, { a: 1, b: 2 })
- this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })</pre>
十, 关于 vuejs 页面闪烁{{message}}
在 vuejs 指令中有 v-cloak, 这个指令保持在元素上直到关联实例结束编译. 和 CSS 规则如 [v-cloak]{display:none} 一起用时, 这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕.
**** 用法如下:****
- [v-cloak]{
- display:none;
- }
- <div v-cloak>{{message}}</div></pre>
这样 < div > 不会显示, 直到编译结束
十一, 关于在 v-for 循环时候 v-model 的使用
有时候需要循环生成 input, 用 v-model 绑定后, 利用 vuejs 操作它, 此时我们可以在 v-model 中写一个数组 selected[$index], 这样就可以给不同的 input 绑定不同的 v-model, 从而分别操作他们. 这个我在 demo 中的 dataBind.vue 中用到.
**** 十二, vuejs 中过渡动画 ****
在 vuejs 中, CSS 定义动画:
- 1 .zoom-transition{
- 2 width:60%;
- 3 height:auto;
- 4 position: absolute;
- 5 left:50%;
- 6 top:50%;
- 7 transform: translate(-50%,-50%);
- 8 -webkit-transition: all .3s ease;
- 9 transition: all .3s ease;
- 10 }
- 11 .zoom-enter, .zoom-leave{
- 12 width:150px;
- 13 height:auto;
- 14 position: absolute;
- 15 left:20px;
- 16 top:20px;
- 17 transform: translate(0,0);
- 18 }</pre>
- }// 欢迎加入全栈开发交流圈一起学习交流: 582735936
- ]// 面向 1-3 年前端人员
- } // 帮助突破技术瓶颈, 提升思维能力
其中动画在定的时候要注意上下对应, 上面有什么, 下面有什么, 都要变化的, 如果有不变化的, 应该抽离出去, 作为公共 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></pre>
十四, 关于 vuejs 中使用事件名
** 在 vuejs 中, 我们经常要绑定一些事件, 有时候给 DOM 元素绑定, 有时候给组件绑定. 绑定事件在 HTML 中用 v-on:click-"event" , 这时 evet 的名字不要出现大写, 因为在 1.x 中不区分大小写, 所以如果我们在 HTML 写 v-on:click="myEvent" 而在 JS 中写 myEvent 就出错误, 所以在 vuejs 的 1.x 绑定事件时候, 要尽量避免使用大写字母. 在 2.0 中没有该限制!**
十五, v-if 与 v-show 的区别
v-if 直接不渲染这个 DOM 元素, 而 v-show 是会渲染 DOM 元素, 只是使用 display:none 隐藏, 打开开发者工具可以看到该 DOM
十六, 关于 transition 全局钩子如何在组件中使用
Vue.transition 是定义一个全局 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() {
- /* 每次切换路由, 在渲染出页面前都会执行 */
- }
- }
- }
总结
来源: http://www.qdfuns.com/article/51116/973c7a0179a152275d4b5532215ebf81.html