初识Vue

分析Hello案例

1. 想让Vue工作，就必须创建Vue实例，且要传入一个配置对象
2. root容器中的代码依然符合html规范，只不过混入了一些特殊的Vue语法
3. root容器中的代码被称为【Vue模板】

<div class="root">
    <h1>hello {{name}}, {{address}}</h1>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    // 创建VUe实例
    new Vue({
        el:'.root',  //el用于指定当前Vue实例为哪个容器服务，值为css选择器字符串
        data:{ //data中存储数据用于el所提供的容器使用
            name:'world',
            address:'北京'
        },
    })

4. Vue实例和容器是一一对应的；
5. 真是开发中只有一个Vue实例，并且会配合着组件一起使用
6. {{XXX}}中的XXX要些js表达式，且XXX可以自动读取data中的所有属性
7. 一旦data发生改变，那么模板中用到该数据的地方也会自动更新

注意区分：js表达式和js代码（语句）
1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
（1）a
（2）a+b
（3）demo（1）
（4）x===y?‘a’:‘b’
2. js代码（语句）
（1）if（）{}

模板语法v-bind

当需要绑定网址的时候，会发现当使用与上边同样方法的

通过增加绑定事件，最后能将url数据传送过去了，v-bind：可以将""里边的数据当成表达式执行
v-bind：能够简写成：

数据绑定

v-bind是数据单项绑定，v-model是数据双向绑定，当在输入框输入数据时候，若采用v-model则后台数据发生改变
v-model只能应用在表单类元素（输入类元素）上，如：input、select等
v-model:value可以简写为v-model，因为v-model默认收集的就是value值

el与data的两种写法

例如可以将实例中的

new Vue({
        el:'#root',
        data:{
            name:'张三'
        }
    })

变为

const v = new Vue({
        data:{
            name:"张三"
        }
    })
console.log()
v.$mount('#root')

这样写的好处就是可以更加灵活，例如，可以设置等待1s再显示

console.log()
setTimeout(() => {
    v.$mount('#root')
}, 1000);

将data写成函数式（当使用组件式时，必须使用函数式写法）

const v = new Vue({
    data:function(){
        return{
            name:'张三'
        }
    }
})