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: '<i>this is about i</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?'第一步':'第二步'}}