2.Vue入门

引包

1.确认已经下载了node后执行命令 npm install vue (需要指定版本后面写上版本号 npm install vue@2)
如果慢可以使用国内淘宝镜像 cnpm install vue

2.将vue.js取出
3.新建html页面引入刚取出的vue.js

 <script type="text/javascript" src="vue.js"></script>

留坑

即留一个vue模板插入的地方或者是vue代码对其生效的地方

<div id="app"></div>

实例化（启动vue）

options的根属性

   el:目的地（srting || DOM元素）

   template 模板

   data 是一个函数 , return一个对象   对象中的key, 可以直接在页面中使用  在js中this.key名

         data中的属性，在dom中直接用在js中 this.xxx

   compoents：key是组件名，value是组件对象

   methods：一般用业配合 xxx 事件

   prpos：子组件接收的参数设置['title']

	<div id="app"></div>
	
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
    new Vue({
        el:'#app',
        template:`
        <div>模板内容</div>
        `
    })
    </script>

浏览器打开html也可以发现，原div被template替代（template只能由一个根节点标签）

插入表达式

插值表达式{{ }}

插值表达式内填入data里面的变量即可在页面取到变量值{{ data里的变量 }}

 <div id="app"></div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
    new Vue({
        el:'#app',
        template:`
        <div>模板内容{{msg}}</div>
        `,
        data:function(){
            return {
                msg:'hellow'
            }
        }

    })
    </script>

浏览器查看