菜鸟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来改变标签里的属性,如:


如果绑定的class太多时,可以把这些class写到计算属性里,如:
computed:{
divClass function (){
return {
circle:isCircle,
blue:!isCircle
}
}
}
这样上边调用的时候写成

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


这两种添加类的方式可以组合使用:
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 ( " 自 定 义 事 件 名 例 " , 需 要 发 送 的 数 据 ) 、 例 如 : t h i s . b u s . emit("自定义事件名例", 需要发送的数据)、例如: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时,则不会发生这种情况

你可能感兴趣的:(学习)