天天看点
返回

vue （vue2.0）使用总结(从大体结构总结)

 vue变量

所有的 vue变量 ，必须在data：中有注册（哪怕内容是空，相当于声明这个是变量，是vue变量而不是js变量）。这里的变量也可以运算。（注意：所有的框架一定要注意js变量和框架的变量，js变量和框架的变量是可以相互转换，获取的。框架的变量有这个框架变量的定义方法，如东信公司的DD变量的定义；如vue变量必须在data中定义（注册）或者methods（方法注册的地方））

 vue函数

所有的方法事件函数，必须在methods中。methods中函数的  this指向vm，获取data中的值可以直接 this.name获得和修改。

　　其它的地方在实例创建之前（如生命周期beforeCreate函数中，全局中）获取data的值，必须指明对象，vm.name  获取。

　　vue中可以调用外面全局的方法，外面全局环境中也可以调用vue中的方法，使用vm.fun。（这样就解决了，vue中不能jQuery操作DOM的问题了）

数据绑定方法

  参考   https://www.cnblogs.com/fly_dragon/p/6218675.html

　　1、文本数据：  

　　　　　　1、 {{ }}方法  ：     eg：<span>Hello {{ name }}</span>

　　　　　　2、v-html 指令  ：   如果是标签内所有的文本

　　 2、属性绑定：       语法   

<标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>

　　　　　　指令中绑定的数据，不能使用   {{  }}方法，直接填 

data里的属性名就可以了。

　　　　　　注意： 

v-bind：value绑定的表单的值，不能双向数据绑定，v-model可以。

　　3、class属性：（class和style是多属性值属性，所以vue除了上面的语法，又另外做了处理）

 　　　　　1、绑定样式对象   ： 

代码：
<div v-bind:class="{ active: isActive }"></div>
解释：
当 isActive为 true时， div就会具有了active样式类，如果 isActive为false，那么div就去掉active样式类。      
直接在html属性中的双引号内写对象，还是很不爽，也没有智能提示，很容易写错。 Vue可以让我们直接把绑定的class字符串指向data的一个对象，这样就非常方便了，
既可以有智能提示，又可以很复杂进行编辑，不用担心烦人的""了。

<div id="app">
  <div class="static"
     v-bind:class="classObject">
  </div>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  });
</script>

　　　　　　2、绑定样式数组  ：

<div v-bind:class="[activeClass, errorClass]">

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

　　　　     3、style属性

　　　　　　　　CSS属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）

<div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">

   var app = new Vue({         
      el: '#app',               
      data: {                   
        size: 19,
        width: 200,
        bgcolor: 'red'
      }
    });

　　　　4、表单选中值的绑定用 v-model   ，比如select标签选中的值是什么和v-model绑定

　　　　5、v-model是双向数据绑定，v-bind是单向的数据绑定。下面两个是等效的

 　　　　　　 参考 详解 v-model ：  https://www.jianshu.com/p/4147d3ed2e60

<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />

　　　　6、v-model绑定的不一定是表单的value属性值（一般都是value属性值，Radio和Checkbox有所不同），

　　　　　　如：单选Checkbox中v-model绑定的是checked属性值，原生标签中只要就这个属性有就是被选中的。用vue通过v-model绑定的变量就可以知道是不是选中。

　　　　　　　　参考 ： https://www.cnblogs.com/dyfbk/p/6868350.html

计算属性 computed ：https://www.cnblogs.com/gunelark/p/8492468.html

　　总结：计算属性 默认只有getter，不过在需要时你也可以提供一个setter （setter 是反过来执行的函数，当计算属性值被改变，执行setter 函数）　  

computed: {
    totle: {
      set (val) { // totle 值的改变会触发这里的函数。但是下get函数引起的totle改变除外
        console.log('set')
        this.msg += 'dfd' // 这里msg改变会引起get函数的执行。只要get函数中使用到的vue数据发生变化都会触发get函数的执行。
      },
      get () { // 这里引起的 totle 值改变，不会触发set里面的函数。
        console.log('get') // 正式开发，这里是不推荐有其他业务代码的，只有一个 return数据
        return this.msg + this.tt
      }
    }
  }

列表渲染

　　　1、列表渲染中的 vue 变量，凡不是一 object.name 形式的变量，渲染出来的结果是一样的。所以如果每一列可能不同的，都必须转化为object.name形式的变量。

　　　2、vue循环渲染可以和条件渲染结合起来使用的

事件绑定  

绑定一个事件
<button v-on:click="say">Say</button>

绑定多个事件
<div v-on:click="sayFrom('first')" v-on:click ="sayFrom('second)">

有修饰符的绑定事件
<a v-on:click.stop='doThis'></a>

 vue.js移除绑定的点击事件   ：  https://blog.csdn.net/tsingsn/article/details/77196167

过滤器

在vue2.0里 管道符‘ | '只能用在 mousetache(插值) 和 v-bind 中。（v-model的数据怎么使用过滤器还不清楚）

 vue里面的vue变量名和方法名还有过滤器名字都不能相同，全局作用域中都可以通过vue对象直接获取到。

new Vue({  
        el: '#app',  
        data: {   
        },  
        filters: {  
            capitalize: function (value) {  
                return value.charAt(0).toUpperCase() + value.slice(1);  
            }  
        }  
    });

Vue2.0里过滤器容易踩到的坑  ：　https://blog.csdn.net/sinat_36555135/article/details/70678478

常用生命周期

实例生命周期钩子（微信小程序框架和它类似） ：  可以把周期钩子  看做  不同时期的人口函数

　　　　参考  ：  https://cn.vuejs.org/v2/guide/instance.html#实例生命周期钩子  或  https://segmentfault.com/a/1190000008010666

常用的生命周期有：

　　1、beforeCreate （2.0版本前叫 init）  ：  在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化。

　　2、mounted   （2.0版本前叫 ready）   ：  在编译结束和$el第一次插入文档之后调用

　　　　vue生命周期中执行函数不可出现vue对象（如vm，vm = new Vue()），因为在 new Vue()过程还没有完成vm的赋值（此时的vm是undefined），所以此时内部执行语句出现 vm ，变量就会报错。

　   3、

destroyed ：在实例被销毁之后调用。单页面用中页面跳转时组件页面就会被销毁。定时器的功能相当于另外开了一个进程，vue组件销毁，并不能结束定时器的程序。需要手动清除定时器，一般都是在销毁的生命周期中执行。

watch  监听数据变化

参考  ：  https://blog.csdn.net/lemon_zhao/article/details/52191527

注意：watch中监听的数据的事件函数，如果是methods中的方法，只能使用字符串，这里不能使用vm.fun对象获取。

　　　v-bind绑定的数据，视图改变不一定使vue变量同步改变，所以不会触发watch中的函数。

new Vue({
  el: '#app',
  data: {
    name: ""
  },
  methods: {
    queryTrendData: function() {
    }
  },
  watch: {
    'name': 'queryTrendData',
  }
});

路由 插件（Vue-router）： https://router.vuejs.org/zh/api/#router-link

1、

<router-link>

 组件

2、

<router-view>

 组件

vuex 状态管理 

1、为什么使用vuex ： https://www.cnblogs.com/goloving/p/9080005.html

vuex的功能 和 localstorage 的作用是一样，把数据在一个所有页面都可以存取的地方。但是vuex的数据具有响应式（类似数据双向绑定），而 localstorage 的数据是固定的，必须手动设置。

2、使用方法：  https://www.cnblogs.com/first-time/p/6815036.html  或  https://www.cnblogs.com/liningstyle/p/8335129.html （推荐这个，比较清晰）

 　 简单使用 ：

　　　　　　1、获取state 数据  ：     

<

p

>{{$store.state.count}}</

p

> 或 

　　　　　　　　　　　　　　　　 

<

p

>{{$store.state.Heade.count}}</

p

>（使用了modules对象管理）

　　　　　　2、设置state 数据  （mutations 设置，所有的数据同步改变）： 设置 state 的数据，需要用到 Store 对象的 mutations 选项中的函数实现。在页面中改变 state 的数据，是通过执行 mutations 对应的方法去改变的。

<a href="javascript:;"@click="$store.commit('Count',10)">click</a>     // 这里 Count 是 mutations 对象下的函数

　　　　　　3、设置state 数据  （actions 设置，解决上边所有数据同步改变）

<a href="javascript:;" @click="$store.dispatch('Acount')">click</a>

关于vue中的$符号总结一下 

参考  ：  https://blog.csdn.net/m_oman/article/details/80412877  或  https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7

注：合理的使用vue是不应该和jQuery一起使用的。

vue使用知识总结：

1、router-link  介绍  ：  https://blog.csdn.net/tanga842428/article/details/53052970

2、（猜测）模板是挂载在 锚点元素上的；组件只能放在模板中。

3、带参数的路由跳转（主要是通过点击事件，触发路由跳转函数） ：   https://blog.csdn.net/kuangshp128/article/details/77280799  或 https://www.cnblogs.com/crazycode2/p/7685424.html  （推荐）

<div class="take_person clearfix" @click="goPage('/personList','2')">点击</div>      
goPage (url, id, userId) {   // url 是 路由地址，后面的参数都是需要现代的数据
            this.$router.push({ 
                path: url,
                query: { 
                    id: id, 
                    userId: userId 
                }
            })
        }

 4、（个人体会）前端的开发解耦性对于后期的维护很方便，思路也比较清晰。所以vue的开发，个人以为好的代码规法如下：

　　a、把调接口的接口都放在一个js文件，封装到对应的函数中，这个js文件，只是配置好url。

// 订单详情查询 
export function getOrderDetail (obj) {
    const url = STAGE_BASE_URL + 'hzeg-order-service/od/getOrderDetail'
    return axios.get(url, {
        params: obj
    }).then((res) => {
        return Promise.resolve(res.data)
    })
}

　　b、调用这个接口的函数，放到vue的 methods 中的函数中，再次封装。

　　c、vue周期函数，只负责程序流程（即只是调用相应的方法，执行程序），不写程序实现。

 5、vue前端面试题 ： https://www.cnblogs.com/sichaoyun/p/8406194.html  或  https://baijiahao.baidu.com/s?id=1612362349849989689&wfr=spider&for=pc

转载于:https://www.cnblogs.com/wfblog/p/9183888.html

javascript 前端
上一篇: XX系统实施过程问题总结
下一篇: sort()函数到底是怎样进行数字排序的

继续阅读