vue全家桶
vue-cli vue脚手架
vue2.0
vuex（vuex 是一个专为 Vue.js 应用程序开发的状态管理模式） 安装 npm install vuex --save
vue-router
axios 安装 npm install axios
element-ui 安装 npm i element-ui -S
vue生命周期
vue生命周期.jpg
生命周期的理解
new Vue() 创建vue对象
beforeCreate 创建实例前的钩子函数
created 实例创建完成之后的钩子函数
beforeMount 开始挂载编译生成的HTML到队友位置时触发的函数（此时还没有将编译出的html渲染到页面上）
mounted 将编译好的html挂载到页面完成后执行的钩子函数，此时可以发送ajax请求获取数据的操作 （mounted在整个实例生命内只执行一次，实时监控data数据变化，随时去更新dom，所以在mounted的时候调用属性和方法是最好的时机）
beforeUpdate
updated
beforeDestroy vue实例销毁之前执行的钩子函数
destroyed 实例销毁执行的钩子函数
computed:
1.用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
2.比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
新建项目
①：cnpm install vue-cli -g （全局安装vue脚手架）
②：进入要安装项目的文件夹，相关命令
d: 进入d盘
cd object 进入d盘的名为object的文件夹
③： 新建vue项目
在命令行中，进入指定路径，运行 vue init webpack 项目名称，例如： vue init webpack my-vue(my-vue为项目名,命令执行后一直按enter，直到开始运行)
cnpm install 安装依赖
npm run dev 启动项目
项目目录
build——项目构建(webpack)相关代码。
config——基本配置信息，如端口等，此处初学我们可以默认。
node_modules——npm加载的项目依赖模块。
src——最重要的开发目录，包含：assets（放置一些图片，如logo等）、 components（ 组件文件夹）、App.vue（ 项目入口文件，存放组件的入口容器）、main.js:（项目的核心文件）
static——静态资源目录。在打包发布后将用于存放静态资源。
test——初始测试目录，可以删除。
index.html ——首页入口文件。
package.json ——项目配置文件，此处初学我们可以默认。
.xxxx文件 ——一些配置文件，包括语法配置，git配置等，此处初学我们可以默认。
README.md ——项目的说明文档，为markdown 格式
项目路由理解
1.
组件封装方法总结
第一种方法
1.新建你所需引用的组件 例如test.vue
<template>
<div>
{{text}}
</div>
</template>
<script>
export default {
name: 'childRenComponents',
data() {
return {
text: '子组件传的参数'
}
},
}
</script>
2.在components文件夹下新建js文件夹，再新建组件构造器的js 例如：js/test.js
import Vue from 'vue'
import toast from '@/components/test'
let ToastConstructor = Vue.extend(toast) // 返回一个“扩展实例构造器”vue.extend() 组件构造器
//实例化组件
let myTest = (text) => {
let toastDom = new ToastConstructor({
el: document.createElement('div')
})
toastDom.text = text;
document.body.appendChild(toastDom.$el)
}
export default myTest;
3.在你要引入组件的页面引用 例如hello.vue
<template>
<div class="hello">
<div v-on:click="test">父组件</div> //绑定点击事件
</div>
</template>
<script>
import Vue from 'vue'
import test from './js/children.js';
// 给vue对象添加toastDom方法
// 如果在main。js定义的话就是全局变量，在所有vue实例中都可以使用
// 如果是当前的话就是当前页面可以退使用的变量
// $是在 Vue 所有实例中都可用的属性的一个简单约定 这样做会避免和已被定义的数据、方法、计算属性产生冲突
Vue.prototype.$toastDom = test
export default {
name: 'HelloWorld',
methods: {
test() {
this.$toastDom('参数')
}
},
}
</script>
第二种方法
vue跨域解决方法
1.Proxy代理 对于前后端分离模式下，前端请求后端存在跨域问题，除了后端主动设置允许跨域请求的类型，前端也可使用proxy代理来转发请求实现跨域
在config里的index.js开启proxy服务
proxyTable: {
'/api': {
target: 'http://api.longxiaozhi.com/index.php?s=',//后端接口地址
changeOrigin: true,//是否允许跨越
pathRewrite: {
'^/api': '',//重写,
}
}
},
对接口时
axios.get("/api/face/project/index")
.then(resp => {
console.log(resp);
})
.catch(err => {
console.log("request fail");
});
vue的数据绑定
1.class与style绑定
<template>
<div class="hello">
<span>vue项目学习{{msg}}</span>
<div v-bind:class="{ active: isActive }">测试绑定class属性第一种</div>
<div v-bind:class="classObject">绑定class属性第二种</div>
<div v-bind:class="{active:isActive,'text-danger':hasError}">绑定class属性第三种</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
isActive: true,
classObject:{
active:true,
},
hasError:false
}
},
}
</script>
<style>
.active{
color: red;
}
</style>
refs的使用
多选框 mint-ui
条件：默认选中一个且不能改变其选中状态并且最多选两个
js页面
import { Checklist } from 'mint-ui';
Vue.component(Checklist.name, Checklist);
export default {
name: 'order',
data() {
return {
.options = [
{
label: 'disabled checkcd',
value: 'valueF',
disabled: true
},
{
label: 'optionE',
value: 'valueE',
},
{
label: 'optionA',
value: 'valueA'
}
]，
}
},
}
html页面
<mt-checklist
:max="2"
v-model="value"
:options="options">
</mt-checklist>
网友评论