分享Vue的学习笔记

最新推荐文章于 2021-01-14 10:50:04 发布

Kattem

最新推荐文章于 2021-01-14 10:50:04 发布

阅读量188

点赞数

文章标签：草稿素材

本文链接：https://blog.csdn.net/weixin_42276859/article/details/88815314

版权

算是先把素材贴下，还没归纳，整理好，排版什么的，后面再弄，抱歉，这段时间比较忙...；

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>

<head>

<title>myNewVue</title>

</head>

<body>

<p>I'm computed: {{changeWord}}</p>

<p>I'm methods: {{changeWordMethods()}}</p>

</div>

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;

(素材,并未整理)

Kattem

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享Vue的学习笔记

算是先把素材贴下，还没归纳，整理好，排版什么的，后面再弄，抱歉，这段时间比较忙...；Vue 的学习笔记：首先是在ng1基础上学习vue，所以讲的话会有时候类比一下。data()里面的都是响应式的，可以避免去使用vue.set;vue路由传参的坑：用params的话传递的参数会被刷新清空，拿不到，所以要保存的参数一般用query来传参++a和a++的区别：在列表展示页数的...
复制链接

扫一扫