• index.html为首页入口文件，你可以添加一些 meta 信息或统计代码啥的；<div id=app与main.js文件绑定。
• main.js: 项目的核心文件。
• 实例化vue对象
  new Vue({
  el: '#app',
  // el:element代表根容器，对应为根目录下index.html的<div id=app>
  //所有的数据展示也只是在<div id=app>这个层次下data（）{} //data本质上是一个对象
  })
• template标签下只能有一个根节点

• {{meg或者函数}}。函数必须带括号，否则会被认为是data(){}下的属性---{{naem()}}。在v-on:click中函数不传参数可以不写括号【v-on:click="name"】，计算属性不传参，所以不使用括号；要传参数则带括号【v-on:click="name()"】。
• 可以直接进行逻辑运算{{5+5}}
  
  {{ ok ? 'YES' : 'NO' }}
  

每个绑定都只能包含单个表达式

一、指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上

例如：v-if="true/false"，直接对dom操作，控制标签文本的显示隐藏;v-show=""，是对css样式display="block/none"的显示和隐藏

• 1、v-on 指令，它用于监听 DOM 事件：
• 2、v-model指令，input、select/textarea checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

HTML 属性中的值应使用 v-bind 指令。

• 3、v-bind:href=""可以简写为:href=""
• 4、v-bind:class=""动态绑定css样式
• 5、v-html=""动态插入html文本
• 6、v-else 和v-else-if元素必须紧跟在 v-if 元素或者 v-else-if的后面——否则它不能被识别。

• 7、v-for 循环指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名

v-for 循环时的 key 值是引用类型（对象或者数组）,key只接收字符串或者numbe

<el-option v-for="item in cities" :key="item.id" ...>{{item.属性名}}</el-option>

- 修饰符是以半角句号 .

• 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

- 鼠标事件

• vue鼠标双击事件v-on:dblclick=""
• 鼠标事件

    <div id="canvas" v-on:mousemove="updateXY">
      {{x}},{{y}}
    updateXY: function(event){
      console.log(event);   //event是js的鼠标事件，offsetX、offsetY是鼠标的坐标
      this.x=event.offsetX;
      this.y=event.offsetY;
    },

• 让鼠标在某一区域停止获取坐标:
  
  方法一：

    <span @mousemove="stopMoving">Stop Moving</span>
    stopMoving: function(event){
      event.stopPropagation();
    },

方法二：

<span @mousemove.stop="">Stop Moving</span>

• 键盘事件v-on:keyup="自己定义函数事件";ref="name"，用来标记html标签，以便获取到键盘输入的值---用法：this.$ref.name.value
• 数据双向绑定（/imput/delect/textarea）v-model="name"----name为data（）{}中定义的变量。v-model绑定了data中的name属性，及name的值会显示到view；v-model变化会影响到name的值

传值

属性传值

• v-bind:自定义属性="data中的users"，
  例如：

<HelloWorld v-bind:users="users"></HelloWorld>

在app.vue中data()下定义属性users数组对象，然后在HelloWorld.vue中写入

props:{
    users:{
      type:Array,
      required:true,

在HelloWorld中就可以正常使用父组件app.vue中data的数据

• vue规范写法

    props：{
     属性名{
         type：String/number/boolean
     }
 }

    props：{
     属性名、对象名：{
         type：Array,
        required:true,
        default:  //1、使用default定义默认值时，如果父组件有传值，则用父组件的渲染；如果父组件没有传值，则使用默认值
        //2、没有定义默认值时，如果父组件有传值，则用父值渲染。如果父组件没有传值，则使用的是该类型的默认值。类型及其默认值如下：

String ''

Number 0

Array []

Object {}
     }
 }

传值---string、number、boolean

传值----改变一个地方的数据，其他地方的数据不会发生改变

引用----array、object

传引用---改变引用一个地方的数据，与这个引用相关的数据都会发生变化

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

事件传值--子传父

第一步：在子组件header里面定义一个点击事件changeString，在事件changeString中都调用$emit('定义一个父组件属性'，'需要传递给父组件的值')；

第二步：父组件home里面header标签里面使用v-on:titleChanged="updataTitle(event'),$event是子组件传递过来的值。再者在updataTitle函数中接收子组件传递过来的值并赋予给父组件定义将传递给子组件的属性itemHeader。最后就是父组件传值给子组件，即可实现

Header子组件
html:
    <header>
         <h1 @click="changeString">{{title}}---{{item}}</h1>
    </header>
    
js:
    changeString(){
      console.log('here 1');
      this.$emit('titleChanged','这是子组件想要改变的值')
    },
    
home父组件
html:
     <Header v-on:titleChanged="updataTitle($event)" v-bind:item="itemHeader"></Header>
js:
    updataTitle(i){
      console.log('here 2')
      this.itemHeader=i;
    }

- 生命周期

创建期间：

1、 beforeCreat------------vue还没有实例化之前。可以做一些加载动画。
2、 created-------vue实例、组件创建好了，data、methods已经初始化了，但是dom没有生成，此时页面并没有展示出来。现在可以请求网络接口获取数据，赋给属性

若是要调用methods的函数或者操作data里面的数据，最早只能在created中操作

• 开始建测vue对象的el属性，或者是检测new vue({el:....}).==$mount("#app")==
• 检测template，
• 从created结束至beforeMount开始期间，表示vue开始编译模板，把执行vue代码中的指令，最终在内存中生成一个编译好的最终模板字符串，然后把这个模板字符串渲染为内存中的虚拟DOM。此时只是在内存中渲染好了模板，并没有把模板挂载到页面内

3、 beforeMount---模板已经编译完成（template里面的内容），挂载到虚拟DOM里面，当前还看不见页面

• 把template里面的东西放入el：#app里面

4、mounted---开始挂载，这个方法一旦结束之后我们的页面就加载出来了----获取数据是在这个方法执行完成后再去获取

运行期间：这两事件，会根据data数据的改变，有选择性的出发0到多次

1、beforeUpdate ---组件更新之前调用的函数，页面未更新，页面显示的数据还是旧的，但是data中的数据是最新的，页面尚未和data数据同步

2、update----组件更新完成后执行，渲染新的页面

销毁期间：

1 、beforeDestroy----组件销毁前。当执行beforedestroy钩子函数时，，实例上所有的data、methods、过滤器以及指令等都处于可用状态。此时还没有执行真正的销毁过程

2、 destroyed----组件销毁。实例上所有的data、methods、过滤器以及指令等都不可用。

vue路由

- 路由规则传参query：

html：
<router-link to="/login?123&jack">登录</router-lonk>
router设置：{
        path:'/login',
        component:Login 
js:
created(){
    console.log(this.$router);
    console.log(this.$router.query.id);
}

- 路由规则传参params：

html：
<router-link to="/login/123/jack">登录</router-lonk>
router设置：{
        path:'/login/:id/:name',
        //:号是占位符
        //在this.$router中，matchedd里面的path（路由设置里面的path）预解析为一个正则表达式，再用正则表达式去解析fullPath（router-link里面to属性的path），将结果传到params对象里面
        component:Login 
js:
created(){
    console.log(this.$router);
    console.log(this.$router.params.id);
}

路由实现布局

http请求（vue-resource，实际上是promise）：npm install vue-resource --save-dev

get、delect、head、json请求：

html:
        ---http请求---
    <input type="button" value="get请求" @click="getInfo">
js:
    methods:{
            getInfo(){
      this.$http.get('http://api.cms.liulongbin.top/api/getlunbo').then(function (result){
        console.log(result.body);
        //get()里面放请求地址；then里面是一个匿名函数，其中有两个参数，第一个是成功的回调这个是必要的；第二个是失败的回调，这个是非必要的，可以不写
        // 通过result.body拿到服务器返回的成功的数据
      })
    }
    }

post、put请求：

html:
        ---http请求---
    <input type="button" value="post请求" @click="posttInfo">
js:
    methods:{
            postInfo(){
      this.$http.post('请求地址url' , { } , {emulateJSON:true } ).then(function (result){
        console.log(result.body);
        //1、手动发起的post请求，默认没有表单格式化，所以，有的服务器处理不了
        //2、post（）里面三个参数，第一个是请求地址URL，第二个是传输的数据name:this.name，
        //第三个是设置提交的内容为普通表单数据格式{emulateJSON:true },以普通表单格式，将数据提交给数据库，application/x-www-form-urlencode
        //在post分分钟，使用.then 来设置成功的回调函数；如果想拿到成功的结果，需要 result.body
      })
    }
    }

 - http请求详细：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

数据监听

方式一：input、select、textarea、checkbox、radio 等标签，先用v-model双向绑定数据，然后设置keyup事件getFullName，

html
    <label>firstName</label>
    <input type="text" v-on:keyup="getFullName" v-model="first">+
    <label>lastName</label>
    <input v-on:keyup="getFullName" v-model="last">
   =<input v-model="name">
   
  js
  methods：{
      getFullName(){
      this.name=this.first+'-'+this.last;
    },
    }

方式二：使用watch：{}。watch可以监听data（）{}对象中的数据，在watch中使用属性名作为方法名。watch是一个对象，和data（）{}对象同级

html
        <label>firstName</label>
      <input type="text" v-model="first">+
      <label>lastName</label>
      <input v-model="last">
     =<input v-model="name">
     
js
   watch:{
    first: function(newVal,oldVal){
      this.name=newVal+this.last;
    },
    last: function(newVal){
      this.name=this.first+newVal;
    }
<!--方法名中若出现-符号，则方法名须使用引号包起来-->
  }

• keyup和watch的区别：keyup只能监听DOM元素中的数据，而watch既可以监听DOM元素的数据又可以监听路由的改变

html
        <ul>
      <!--      href=""的值绑定的是路由的地址-->
      <li><router-link to="/home">Home</router-link></li>
      <li><router-link to="/index">index</router-link></li>
    </ul>
<!--    将组件挂载到DOM,由vue-router提供的元素，可以视为一个容器，展示路由规则匹配到的组件-->
    <router-view></router-view>

js:
    watch:{
    '$route.path':function(newVal,oldVal){
      console.log(newVal+'---'+oldVal);
      if(newVal==='/home'){
        alert('welcome to home')
      }else if(newVal==='/index'){
        alert('welcome to blogs')
      }
    }
  },
  //注意：watch和data（）{}对象同级

- 计算属性computed、watch和methods的区别：

computed：本质是一个方法对象，只不过使用的时候把他的名字当作属性来用

• 1、计算属性在使用的时候，一定不要加（），因为他是属性
• 2、计算属性的function内部所用到的任何data（）{}对象中的数据发生变化，就会重新计算这个计算属性的值；若计算属性方法中的任何数据都没有发生变化，则不会对计算属性重新求值
• 3、计算属性求值的结果会被缓存起来，方便下次直接使用；
• 4、计算属性必须要return出去一个东西，适合做一些简单的数据操作

methods：methods每次模板编译都会执行【created的（）进行数据定义是第一次】，调用函数也会重新执行一次

• 1、methods适合做大量的业务逻辑处理

watch：是一个键值对象，比较适合去监听一些虚拟的东西（路由）

• 1、键是需要观察的表达式，值是对应的回调函数。主要用来监听特定数据的变化，从而进行某些具体的逻辑业务操作；可以看作 是computed和methods的结合体

-详见DemoT.vue文件