1. nodejs安装
2. 安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
3. vue脚手架安装
cnpm install -g vue-cli
4. 创建一个vue项目
vue create myproject -r https://registry.npm.taobao.org 淘宝镜像快速创建
myproject 自己定义的项目名
npm run serve 运行
5. 安装iview or Elementui
6.监听事件
v-on:click 缩写为 :click,:click="fun()"调用函数,可以绑定任意的名字,如:data,:href,:src
7.条件语句
v-if v-if=“name”
8.循环语句
v-for
9.属性绑定
v-bind:href
10.双向绑定
v-modal
11.组件
components
**12.Vuex **
store.js 类似于一个页面中的data ,state是变量,mutations是方法 其中两个参数state,payload分别是state实例,传进来的参数,是一个对象
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
AMsg: "",
BMsg: ""
},
mutations: {
receiveAMsg(state,payload){
state.Amsg = payload.Amsg;
},
receiveBMsg(state,payload){
console.log(payload); // 传入的参数
state.BMsg = payload.BMsg;
console.log(state); // 就是上面的state
}
},
actions: {
}
})
调用其中的receiveBMsg,其中payload是第二个参数
this.$store.commit("receiveBMsg", {
BMsg: this.BMessage
});
在其他页面监听这个值的改变,使用this.store.state.xxx 返回值
computed: {
// couputed也是类似于watch的监听,数据改变会自动检测,但不能声明变量,watch需要声明
AMessage() {
console.log(this.$store.state);
return this.$store.state.BMsg;
}
},
$attrs 可以在子组件中获取到由父组件传来的值
学习资料
教程注意:为什么无法new Vue
vue官方文档
vue新手入门文档