菜鳥vue總結基礎知識點

@学习vue的总结

基础知识点

package.json 是项目的说明书，其中下载的插件是项目依赖，其中的dependencies是项目运行时的依赖 ，devDependencies是开发时依赖，

src是正式写代码的地方，入口文件是main.js，里边有引入的vue等和vue实例

.babelrc中"browsers": ["> 1%", “last 2 versions”, “not ie <= 8”]要求浏览器大于1%，是最近的两个版本，不是ie浏览器小于等于8

组件化开发的优点：代码可以复用，降低代码的耦合性

1.vue是一个构造函数，可以new vue（）构造出vue的一个实例，这个实例主要是来控制html代码，vue实例会把它控制的html代码生成一个html模板

2.vue的{{ }}里边的内容可以理解为是js代码，因为里边放的通常是变量也可以放一些简单的字符串模板，如：name+‘123’ ，也可以调用函数，三目运算符等，

但不能写复杂的js代码，如：for if等

3.v-bind指令：v-bind用来绑定某个属性，如：百度 link为data里定义的变量，或如：。简写为 ：href=“link”

4.v-once指令：只与第一次渲染变量的值有关，如：

{{ name }}

这个指令用于name的值有多次改变的时候

5.v-html指令：如果变量里写的是一个标签，如：html：' 百度 ’ , 则上边不能{{ html }}这样用，会直接把标签也渲染出来

上边应该写成

但这样会有安全性的问题

6.v-on指令：用于绑定事件，如：增加 其中当add这个函数没有参数，那么在调用的时候不用写（），当写事件对象的时候

（就是第一个变量是event时），调用时不用写（），如果要写参数还要写事件对象的时候，那么参数里可以写成

表示第一个参数是20，第二个对象是事件对象。 简写为@click=“add()”

7.事件修饰符：.stop 阻止事件冒泡：

获取当前的xy坐标

8.按键修饰符：.enter .space 当按enter键或空格键的时候在调用函数，如：

{{ input }}

这样p和input标签的数据就进行了双向绑定，,负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素 的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。 10.计算属性：计算属性与函数的区别：1）计算属性在调用时不用写成执行模式 2）函数的特性：当任意一个dom节点发生变化，不管与那些事件相关不相关都会从头执行一遍， 而计算属性不会，它会分析页面发生变化与那些函数相关，从而执行相关函数。计算属性用于监听数据，当数据发生变化时执行操作，计算属性是基于它们的依赖进行缓存的 3）计算属性写在computed：{ }里，函数写在methods：{ }里 11.另一种监听数据的方式：watch 格式： watch：{ 要监听的数据：function（函数中的第一个参数是要监听数据的最新值）{ 逻辑操作 } }

计算属性与watch的区别：

1）计算属性都会有返回值，而watch没有

2）计算属性里边的代码是同步的代码，而watch中可以写异步操作，当数据发生变化时向后台请求数据只能用watch，因为是异步的

12.动态添加删除样式：

通过v-bind来改变标签里的属性，如：<div class=“shape” @click=“isCircle=!isCircle” v-bind:class="{ circle:isCircle,blue:!isCircle }">

如果绑定的class太多时，可以把这些class写到计算属性里，如：

computed:{

divClass function (){

return {

circle:isCircle,

blue:!isCircle

}

}

}

这样上边调用的时候写成<div class=“shape” @click=“isCircle=!isCircle” v-bind:class=“divClass”>

13.class直接绑定一个类名：

这两种添加类的方式可以组合使用：<div class=“shape” @click=“isCircle=!isCircle” v-bind:class=" [ color,{ circle:isCircle,blue:!isCircle } ] "

14.动态操作style

15.条件渲染：v-if 是用于根据条件展示元素的选项 和其他指令一样写在标签里边，如果v-if后边的条件是true，则这条语句显示，如果为false，则这条语句就会消失，，有v-if v-else-if v-else 如：

对不起，已经没货了

如果想让两个条件语句同时显示或隐藏可以用这个标签 16.v-show: 用法与v-if一样，只不过v-show的隐藏是display:none的这种方式的隐藏 17.列表渲染：v-for 1) 如何去循环数组：

• {{ item }}

这样渲染出来有几个item就会渲染几个li 2) 如何去循环数组里的对象：

• {{ item.name }} {{ item.rate }} {{ index }}

data:{ items:[ { name:"我不是药神"， rate：9.8 }， { name:"一出好戏"， rate：8.0 } ] } 3) 如何去循环一个对象：

{{ v }} {{ prop }} {{ index }}

data:{ person:{ name:'tianlei', age:18 } } 4) 列表渲染中常遇到的问题： a）比如点击时改变一个列表内容

1. 路由与http：

   a): 路由与a标签的区别与联系：

   路由与a标签都能实现页面的跳转，但路由的性能更好，点击a标签很多次页面会一直请求一直刷新，而点击路由后不会实现页面的请求和刷新，直接到另一个页面

   b): 如何下载并配置路由：

   命令行写上 npm install vue-router --save-d 可以在本地安装路由

   然后在main.js里挂载上vue-router： import VueRouter from ‘vue-router’ Vue.use(VueRouter)

   配置路由：

   //配置路由

   const routes=[

   {

   path: ‘/’, component: Home

   },{

   path:’/meun’,component:Meun

   }

   ]

const router = new VueRouter({

routes,

mode:‘history’

})

new Vue({

router,

render: h => h(App)

}).$mount(’#app’)

c): router-view标签与路径为’ \ '的关系

当在根组件中展示路径为默认路径的组件时，就需要标签，这个标签就表示默认组件的内容，router-view会展示router-link的内容

d): 怎样在任意一个组件中使用http协议：

安装resource 在命令行上输入：npm install vue-resource --save-d

在main.js中输入 import VueResource from ’ vue-resource ’ Vue.use( VueResoure )

然后在想要使用http协议的组件中写上：

created (){

this.$http.get( " http协议路径 " ).then( ( data )=>{ //如果调用成功，走then，data表示get里的http路径

要写的逻辑

})

}

19.Vue中需要注意的小细节：

a) is属性的用法：当用table tbady tr td 等一连串的标签时，如果把tr标签当做一个属性是错误的，可以用代替，，这样的标签还有ul li select option等

b) 这一个组件中写另一个组件的时候，data用函数返回对象的形式来写，这样可以使每一个引用都有自己的数据，不会共用。

c) vue中也可以获取dom节点：在标签或组件上写ref=“name” 获取的时候用this.$refs.name来获取。

组件

绑定bus

在src文件夹下新建一个plugin的文件夹，里面新建一个bus.js的文件

function plugin (Vue, optioins) {

window.bus = new Vue();

Vue.prototype.bus = window.bus;

};

export default {

install: plugin

};

在main.js下写

import bus from ‘./plugin/bus’

Vue.use(bus)

bus就绑定完了

自定义事件（组件间的通信） 用于兄弟组件和子向父组件的传值

如果组件A需要把数据发送给组件B的话

就在组件A发送一个事件例：

this.bus. e m i t ( &quot; 自 定 义 事 件 名 例 &quot; , 需 要 发 送 的 数 据 ) 、 例 如 ： t h i s . b u s . emit(&quot;自定义事件名例&quot;, 需要发送的数据)、例如：this.bus. emit("自定义事件名例",需要发送的数据)、例如：this.bus.emit(‘changearr’, [1,2,3,4]); //这里的事件名始终用小写 this.bus.KaTeX parse error: Expected '}', got 'EOF' at end of input: … () { this.bus.on(‘接收过来的自定义事件名’， （一个形参） =》 {

这个形参就是传过来的数据

})

}

例如：

mounted () {

this.bus.$on(‘changearr’, (val) => { //该方法用于兄弟组件之间的传值 //v-on:changearr=“change()” 该方法用于子组件向父组件传值

你可以打印一下这个val是不是传过来的数据

console.log(val) // [1, 2, 3, 4]

})

}

二： vue 的父组件向子组件传值

我之前教过你自定义事件，自定义事件用于兄弟组件和子向父组件的传值，用法给你写过文档了，好好练练。

我这次教你父向子组建的传值

我先写一个父组件

我是父组件

我在写一个子组件

我是子组件

• {{i.name}}

1.子组件向父组件传值用事件传值，，父组件向子组件传值用属性传值，都是自定义的，分别用$emit和props来自定义

2.组件之间传值和传引用的区别：

值包括：string number boolean等

应用包括：数组和对象

例如：父组件向子组件传了一个数组，当在子组件中删除、添加或改变这个数组的内容时，当在父组件中应用多个这个子组件时，当改变一个子组件的内容时，所有子组件的内容

都会改变

但是在父组件向子组件传递一个string或者number时，则不会发生这种情况