@学习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.name }} {{ item.rate }} {{ index }}
{{ v }} {{ prop }} {{ index }}
data:{ person:{ name:'tianlei', age:18 } } 4) 列表渲染中常遇到的问题: a)比如点击时改变一个列表内容- 路由与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时,则不会发生这种情况