安装VUE.js

v-text 会把内容当作字符串输出

v-html 会识别html标签，并输出标签里内容

components:将引入的组件注册放入本页面

props:传递信息,子组件向父组件传递信息

headerA.vue  子组件

{{msg}}//可以显示

props:['msg'],//字符串,注册

methods:{

      doThis(){

            console.log(this.msg)

    }

}

App.vue

<header-a msg='app.vue'></header-a>//驼峰法,将每个大写变为小写,并加上' - '

import headerA form './headerA'

components:{ headerA, }//注册组件,可以放多个

export default{
    fetch:function(){
    return JSON.parse(window.localStroage.getItem(STORAGE_KEY)||'[]'),    
    },
    save:function(items){
    window.localStorage.setItem(STORAGE_KEY,JSON.stringify(item))
    }
}

引入
import Store from './store.vue'

使用

Store.fetch//显示
Store.save//存储,放到浏览器的某个页面上

@key.enter=""  当按下enter时,数组加上当前输入的值

addItem(){

this.data.push({

label:this.newItem,

isFinished:false

})

}

安装vue

props: ['msgfromfather']

接收消息从来自父组件的消息

vue中的组件属性特殊的地方：

components:  {HelloWorld}

在html上调用这个组件的时候vue规定，换成小写，并在大写的地方变成-：

<hello-world></hello-world>

热更新：修改app.vue会立马显示在view html上，而不同刷新

vue.js的一个组件
*.vue是vue.js中特有的文件格式，它集合了html（<template></template>），js(<script></script>)，和css(<style></style>)

子组件向父组件传值，方法1

使用$emit来自定义一个时间

this.$emit('my-event',参数传递的值)

1、data（存放所有的数据）

2、methods（方法，逻辑函数）

methods:{
    doSomething:function(){
        
    }
}
3、watch（监听函数）
    watch：{
        "a":function(val,oldVal){
            console.log(val,oldVal)
        }
    }
 4、v-text={{}}（不解析带有<p>属性的标签，直接输出文字）、v-html（先解析查看是否有标签属性的，在输出，安全xxs尽量不要直接输出标签）
 5、v-for： v-for="(value,key,index) in items"   value:属性值  key ：属性名  index：索引从0开始
     <ul>
         <li v-for="(value,key,index) in items">
             <p v-text="item.label"></p>
         </li>
     </ul>
   6、v-on：click="doThis" 简写：@：click="doThis" 事件绑定
   7、v-bind:src="imagesSrc" 简写：  ：src="imagesSrc" 动态添加属性
          [] 这class是否等于规定的，{}class是否有这个的值是否是真的
       <div :class="{red:isRed}"></div>
       <div :class="[classA,classB]"></div>
       <div :class="[classA,{calssB:isB,calss:isC}]"></div>

# 全局安装 vue-cli

npm install -g vue-cli

# 创建一个基于‘webpack’ 模板的新项目

vue init webpack my-project

#安装一来，走你

cd my-project

npm install 

npm run dev

双向绑定

<div id="demo">

    <p>{{message}}</p>

<input v-model="message">

</div>

var demo = new Vue({

    el:"#demo",

data:{

    message:'hello vue.js'

}

})