算是先把素材贴下,还没归纳,整理好,排版什么的,后面再弄,抱歉,这段时间比较忙...;
Vue 的学习笔记:
首先是在ng1基础上学习vue,所以讲的话会有时候类比一下。
data()里面的都是响应式的,可以避免去使用vue.set;
vue路由传参的坑:用params的话传递的参数会被刷新清空,拿不到,所以要保存的参数一般用query来传参
++a和a++的区别:在列表展示页数的时候是++a
关于directive
v- => ng- ;
v-for => ng-repeat ;
跳转页面的两种方式:
(1)router-link to="url" => ui-sref="url"
(2)vue中,存在有router.push()方法,来实现跳转,有点像ng中的state.go(),一般在methods中定义使用;另外,传参方式不一样;
一样的,ng中的使用要注入$state服务对象,vue中则是import引入route这个服务对象;
另外,值得注意的是:
父子组件传参,用props;
动态路由匹配:ng中对应的是$state=>Vue中的$router,获取参数的形式一样;就是从URL上面取值;
如果要去location.hash,只要在Router对象里面设置:
{
mode: 'history',
}
此时记得后台的url要同时正确匹配。
子组件如果不是普通的html元素,而是vue的组件,绑定click事件的时候要加.native修饰符!!
子组件往父组件传值:
需要调用$emit()方法,该方法接收参数,其实类似于jq的trigger,:
$emit(‘事件名称(自定义,就是你在父组件中接收的函数名)’ ,参数1,参数2),
在对应的指令的地方绑定对应事件名称,用v-on:事件名称(与子组件的相同,简写$on(),类比于jq的on()方法)。
父组件往子组件传值:通过内置的props这个接口来传到子组件上
首先在子组件中声明props
然后在父组件中传这个值过来;
关于created:
created:fn(){....}会在页面公共进来的时候,dom渲染完毕前执行,具体请参考vue的生命钩子函数;
methos和computed的区别:
写法上有点区别我就不说了...
当methos与computed都被调用多次的时候,计算属性只会被调用一次。而且,computed不能传值;
本质上来说是因为:
computed是基于它的依赖进项缓存,只有当它的相关依赖改变的时候,才会重新触发计算。
例子:
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>myNewVue</title>
</head>
<body>
<div id="myApp">
<p>{{name}}</p>
<p>I'm computed: {{changeWord}}</p>
<p>I'm computed: {{changeWord}}</p>
<p>I'm methods: {{changeWordMethods()}}</p>
<p>I'm methods: {{changeWordMethods()}}</p>
</div>
<!-- built files will be auto injected -->
<script>
var vm = new Vue({
el: '#myApp',
data: {
name: 'xiaoming'
},
methods: {
changeWordMethods: function () {
console.log('调用普通方法');
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1);
}
},
computed: {
changeWord: function () {
console.log('调用计算属性');
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1);
}
}
})
</script>
</body>
</html>
computed 与watch:
watch和ng的$watch是类似的,意味着监听,它能够监听任意一个绑定的属性或子是data的属性的value进行相应的响应;
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) |
但是computed不一样,computed每次重新计算是基于依赖的改变,所以,性能会好太多了。
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) |
关于computed的默认属性函数
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
// ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } // ... |
现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。
关于computed的一些猜想
我十分佩服尤大,这个快乐的、用心的、专注的、自由的vue创始者。computed在我之前接触的库或者是框架,没有听过类似的设计(可能是我接触的太少,那时候ng\react\vue尚未成熟);它类似于一个function()或者说是methos(),也类似于一个fitter(),我在猜想它背后的设计的意义:它其实是包含了复杂计算逻辑的fitter,或者说是一种多次调用却减少内存消耗的funtion;有没有人能理解我在讲什么...好吧,就当我自言自语。
关于Class和Style(写法类似的)
class和style的绑定
一般写法:
v-bind:class=" 变量名?“class1”:"class2" "
(v-bind可以省略),类比ng-class;
(1)绑定HTML class
对象语法
v-bind:class=" {active:isShow} "
数组语法
v-bind:class=" [var,'class1'] "
var可以是变量,所以可以使用
(2)绑定内联样式
对象语法
数组语法
//需要font-size =>fontSize
关于template
默认的,<template>...</template>并不会渲染到dom树之中,经常配合v-if去实现多个子类的dom的结构是否被渲染。
可以对比去学习一下render()这个fn()
关于v-for,类比于ng-repeat
主要用于渲染列表,与其说和ng-repeat像,还不如说和wx-for更像,都有一个key值,用来代表子项的独一无二的身份;
v-for能用两种写法(本质是一样的,能够拿到item和index):
(1)v-for="(item,index) in arrList" :key="id";
(2)v-for="(item,index) of arrList" :key="id";
值得注意的是,这里的key值,主要作用两个:
(1)跟踪每个理想的节点(子项)的身份,从而重用和重新排序现有的元素;
(2)理想的key值是每项都有且唯一的id;尽量别用index(原因是如果你只是频繁的更新部分的VueDom的话,比如某个ul中的某个li,它可以节省Vue的ObjectDefindProperty()的压力;此类比ng1的track by $index,ng1中不写track by $index的话会导致无论怎么操作,$watch都会去绑定整个li,每次更新都是整个ul发生更变,这样讲应该明白吧...);
数组更新的检测
a、使用以下方法操作数组,可以检测变动
pop()、push()、shift()、unshift()、splice()、sort()、reverse()
b、以下方法不能更新原数组,一般会采用再次赋值的方法实现重新渲染:
filter()、map()、concat()、slice()等;
c、如果直接通过索引值改变数组的话,值会变,但是不会重新渲染;举个栗子:(自己敲一下);
如果要更新,需要用Vue.set(arr,index,newValue)方法去更新视图;其实这块,可以避免的,可以先把数据处理完毕后,再赋值到data()中,记住,data()的数据是一直被劫持的;
这几天写东西踩坑了,vue在一些程度上和ng1非常相似但是,只是相似,ng1有些地方的缺陷vue同样也会存在,但是处理方式会不一样,当然,两者的处理方式不太一样;这里提出一些,希望以后少点踩坑:
(1)路径的坑。也不是说坑吧,其实是历史的遗留问题;在template中,你的src如果要静态写死(固定的话),本质上是因为vue走的webpack的路线,而url-loader只能去解析模板中的数据,你放data是不行的,尽管你直接赋值,他会解析为字符串,而不是我们想要的;这时候需要用require("xxxx")语法,告诉webpack去解析路径而不是字符串,其实这个node.js带来的锅,node的语法被带到这里来了;其实,src也没必要做成响应式的,所以不要放data,你可以用v-bind的就行,:src='xxxxx';
(2)关于v-for搭配v-show,渲染列表无法重置视图更新:
和ng-repeat一样的,v-for会比较方便,ng1中的ng-repeat会存在自己的作用域,导致你在取值或者查找某个变量的时候需要从$parent或者$children的scope入手,正常的$watch是没办法直接绑到repeat出来的内部结构;在vue的v-for中,却是,如果你需要触发视图的重新更新的话,得用vue.set()这个方法(简写是$set,关于这个详情我后续会再详细讲这个方法的用途);
关于Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
其实我的理解,它就是基于store模式设计的一个数据中转;
比如你买淘宝的东西,收钱的淘宝相当于这个vuex的store,你的钱和商家的货物就相当于两个不同组件的数据.互相流转;
(1)state:单一的状态树,每个应用将仅仅包含一个store实例。
this.$router.state.状态名字
...mapState([“title”])
(2)getters(type:funtion):可以认为从store中的state中派生出一些状态,getters的返回值可以认为是store的计算属性
this.$store.getters.计算属性的名字
...mapGetters(“getFilms”)
(3)mutations:更改Vuex的store中的状态的位移方法就是提交mutations
常用的写法:
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
必须是同步函数
this,$store.commit(“type”,"payload");
(4)actions
Action提交的是mutation,而不是直接变更状态。
Action可以包含任意的异步操作。所以一般吧异步放这里,比如延时函数、请求等;
this,$store.dispatch(“type”,"payload");
组件注册时候有个坑。额,你不能带上-号,拼接小写名字,类似于pay-form是不行的。必须命名大驼峰才行,改成Payform;
(素材,并未整理)