vue安装和组件

安装

全局安装 vue-cli
 npm install -g vue-cli
 创建一个基于 "webpack" 模板的新项目
vue init webpack my-project   // 这样安装就自动试生\成router文件

// vue init webpack-simple shangc    这样就没有router
 安装依赖
 cd my-project
 npm install
 npm run dev

第二种

1.下载node

二.使用vue-cli搭建脚手架

npm 安装不用装加 --save -dev

npm install -g @vue/cli  (一次安装,后面不需要在安装)

1.vue create 项目名  这个一定要写

2.cd 项目名

3..npm run serve

第三种

新建一个文件

1.下载node

检测npm版本，在终端输入 npm -v,尽量使用5.x以上版本。

全局安装vue-cli，在终端里输入，npm install vue-cli -g。

在终端中输入 vue init webpack

 npm run dev

 

refs

父组件

标题

mounted() {  //要在数据显示出来后调用

console.log(this.$refs.h);

this.$refs.h.innerHTML = "我是一个标题呀";

}

};

refs获取标记的元素  ，父组件中获取dom元素，子组件中获取实例,不过vue不推荐操作dom元素。

组件

 

全局组件  

在main.vue  父组件中 

子组件中 

{{level2}}

   

{{level3}}

export  defult{props:["level2","level3"]}

 

 

局部组件

 

.引入组件在main.js中import mybreadctum from "./component/mybreadctum.vue"

注册组件:components("mybreadctum "//组件名,mybreadctum //组件)

在main.vue中使用<mybreadctum >mybreadctum >

 

1.vue中父组件向子组件(小功能)传值是通过绑定属性的形式传递的，子props接收 ，父组件可以监听子组件的绑定事件，子组件通过$emit 向外触发事件,通过@监听事件的变化，this.$emit('delete', this.index) 向外触发delete自定义事件

2.虽然说 Vue.component里是子组件， todo-item替换过来是子组件，但todo-item本身是包含在父组件模板里的，所以它属于父组件。那个li标签才属于子组件

绑定原生事件在点击@click.native    @click后面加一个native

 

组件的一些细节点

渲染组件不用直接写组件名   如ul里面写li     可以用

  row是注册的组件名

组件参数校验

在props中声明一个content:numer/string(数据类型),或者可以content:[string,number]

Vue.component里面的jdata应该是一个函数  写法data:function(){}
methods中就是一个data:

新建todolist文件

在main.js文件中引入外部组件import   todolist from "./todolist" 

el:"#app",

components:{todolist },

template:""

以计数器为例

在其他文件中引入外部组件import   todoitem from "./todoitem "  (外部组件(todolist )里面只需在template写一个模板l

item

)

使用方法1

1,父组件引入外部组件import   todoitem from "./todoitem " 

2.父组件中注册组件

.export default {

components:{ "el-button"  todoitem },   //el-button是elment中的ui组件

}

3.//在对应是位置使用<todoitem   ：innum=“10”>    //：innum=“10”是父组件给子组件传值

/el-button是elment中的ui组件    在对应是位置使用  ：innum=“10”>el-button>    //：innum=“10”是父组件给子组件传值

 

4.在子组件中props[ "innum"]  接收父组件传递过来的数据 ，

num：0，  如果有传过来的值就显示值，，如果没有就显示0

created() {

// 如果有值

if (this.swiperList) {

this.defaultSwiperList = this.swiperList;

}

 

子到父组件（为了能够在父组件数据改变的时候拿到该数据）

子组件中写  ，如果$emit放在标签里this可以不写，  如果写在methods:{  this.$emit( "num-change",this.num)}   num-change是事件名，    事件后拿到的数据。

 

父组件中  使用@num-change=''change''     数据改变拿到子组件里的数据

methods:{

change(){
}

}
 

new Vue({

el:"#app",

//todo-item是要显示的标签  ,todolist是引进来的文件

components:{'todo-item': todolist }, 

 

 

点击

v-for="(item ,index) in list" :key="index"

:content="item"

:index="index"

@delete="handeldelete"

>

 

 

vuex

npm n install vuex --save

新建store.js文件

在store.js中

import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  const state={
    count:1
},

const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}
})

新建一个vue的模板，位置在components文件夹下，名字叫count.vue。在模板中我们引入我们刚建的store.js文件，并在模板中用$store.state.count输出count 的值。

在count.vue模板中加入两个按钮，并调用mutations中的方法。