vue学习小结
vue学习小结
前言
学习vue已经有一段时间了，今天把这段时间的学习心得和一些小问题记录一下，防止以后忘记，争取不贰过。
1.vue引入和vue-cli脚手架的使用
首先要下载node.js，安装vue-cli脚手架，创建webpack项目，安装依赖，正常运行
node -v //可以查看node.js是否安装完毕
$ npm install -g cnpm --registry=https://registry.npm.taobao.org； //推荐使用淘宝镜像
cnpm install --global vue-cli //安装vue-cli脚手架
vue init webpack demo //创建webpack项目
cnpm install //安装依赖
cnpm run dev //正常运行
这个时候一个vue项目就可以正常运行了
2.vue的常用生命周期
-
created:{}
created 内的方法一般作为初始化数据时使用 -
mounted(){}
mounted 在刚进入页面时执行方法 -
methods:{}
methods 所有用到的方法都可以写在这里
3. 监听方法 watch:{}
watch 监听事件改变的方法
//一般由父页面传过来的值改变
例子：propsvalue:{
immediate:true,
handler:function(val,oldval){ //val改变后的值，oldval改变前的值
if(val){
this.commitPapers(); //发生改变再执行方法
}
}
},
4. 父子页面传值
-
1.父页面传子页面
父组件：
//父页面
<template>
<div>
父组件:
<input type="text" v-model="name">
<!-- 引入子组件 -->
<child :inputName="name"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data () {
return {
name: ''
}
}
}
</script>
子组件：
//子页面接收
<template>
<div>
子组件:
<span>{{inputName}}</span>
</div>
</template>
<script>
export default {
// 接受父组件的值
props: {
inputName: String,
required: true
}
}
</script>
-
2.子页面传父页面
子组件：
<template>
<div>
子组件:
<span>{{childValue}}</span>
<!-- 定义一个子组件传值的方法 -->
<input type="button" @click="childClick">
</div>
</template>
<script>
export default {
data () {
return {
childValue: '我是子组件的数据'
}
},
methods: {
childClick () {
// 第二个参数this.childValue是需要传的值
this.$emit('childValueName', this.childValue)
}
}
}
</script>
父组件：
<template>
<div>
父组件:
<span>{{name}}</span>
<br>
<br>
<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<child @childValueName="childValuefangfaName"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data () {
return {
name: ''
}
},
methods: {
childValuefangfaName: function (childValue) {
// childValue就是子组件传过来的值
this.name = childValue
}
}
}
</script>
5.vue里的显示和隐藏
-
v-if
详情查看文档
示例：
<div v-if="true">显示</div>
<div v-if="false">隐藏</div>
可以在data里定义一个变量，如zy，当zy:false隐藏，zy:true显示
<div v-if="zy">显示</div>
<div v-if="!zy">隐藏</div>
-
v-show
用法和v-if一样，判断true显示，false隐藏
6.vue里的bind属性
v-for | v-show | v-html | :class | :style | @click | 引入组件-注册组件
<template>
<div>
<ComponentA v-for="(item,index) in fruitList" :key="index"></ComponentA>
//这是个组件
<ul>
<li v-for="(item,index) in fruitList">{{index}}: {{item.name}} : {{item.price}}</li>
</ul>
<ul>
<li v-for="(index, key,value) in fruitList">{{index}}: {{key}} : {{value}}</li>
</ul>
<p v-for="item in fruitList"></p>
//v-html用法，可以输出转换标签后的代码
<p v-html="withHtml">
{{hello}}<br>
</p>
<button @click="addItem">点击事件</button>
<a :href="link">动态绑定</a>
<a :class="classBind">动态绑定通常用于绑定class</a>
<a class="link" :class="classArrayBind">动态绑定也可在绑定class的时候使用数组或者对象</a>
<a :class="hasError?classArrayBind[0]:classArrayBind[1]">三元运算</a>
<a :style="styleExample">绑定样式表</a>
<button @click="changeColor">换颜色</button>
<button @click="changeShow">看见?</button>
//this.ifShow = !this.ifShow,可以控制true或者false
<a v-show="ifShow">显示或者隐藏</a>
</div>
</template>
<script>
import Vue from 'vue'
import ComponentA from './components/a'
export default {
//渲染一个子component
components: {
ComponentA: ComponentA
},
data() {
return {
classArrayBind: [{
classA: 'red'
},
{
classB: 'green'
}
],
styleExample: {
'font-size': '20px',
'color': 'red'
},
hasError: false,
ifShow: true,
classBind: 'redFont',
link: 'http://www.baidu.com',
hello: 'world',
word: 'this is from app2.vue, maybe will import by some js;',
withHtml: 'this is about i',
//渲染数组
fruitList: [{
name: 'apple',
price: 34
},
{
name: 'banana',
price: 56
},
],
//渲染对象
objList: {
name: 'apple',
price: 345,
}
};
},
methods: {
addItem: function() {
//console.info(this.fruitList)
this.fruitList.push({
name: 'peach',
price: 30
})
},
changeColor: function() {
this.styleExample.color = 'green'
},
changeShow: function() {
this.ifShow = !this.ifShow
}
}
}
</script>
<style>
</style>
7.三元运算
- 加粗样式多个判断条件，时序性，注意内层的判断条件要用（），不加 ‘’ || “”（这里加个粗）
//多个判断条件，时序性
{{register?(stepOne?"第二步":(stepTwo?'第三步':'')):'第一步'}}
- 正常的三元运算
//多个判断条件，时序性
{{register?'第一步':'第二步'}}