Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

<!-- 1. 提供容器 -->
   <div class="app">
        <input type="text" v-model="str">
        <p>{{str}}</p>
   </div>
   <!-- 2.引入 -->
   <script src="./vue.js"></script>
   <script>
    //    3. 模拟数据
    let data = 'abc';
    let vm = new Vue({
        // 4. 设置Vue的选项
        el: '.app',
        data: {
            str: data
        }
    });
   </script>

基础-实例选项-EL
作用：当前vue实例所管理的html视图
值：通常是id选择器（或者是一个dom对象）
注意！！！不要让el所管理的视图是html或者是body

基础-实例选项-DATA
Vue 实例的data（数据对象），是响应式数据（数据驱动视图）
1.data中的值{数据名字：数据的初始值}
2.data中的数据msg/count可以在视图中通过{{msg/count}}访问数据
3.data中的数据也可以通过实例访问vm.msg或者vm.$data.msg
4.data中的数据特点：响应式的数据->data中的数据一旦发生变化->视图中使用该数据的位置就会发生变化

<div id="app">
        <p>{{msg}}</p>
        <p>{{count}}</p>
        <p>{{list}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data: {
                msg: '铁蛋儿',
                count: 100,
                list: [1,2,3]
            }
        })
        vm.count = 200
        vm.list.push(4)
        console.log(vm)
        console.log(vm.msg)
        console.log(vm.$data.msg)
    </script>

基础-实例选项-METHODS
掌握实例选项methods中方法的使用及注意事项：
methods其值为一个对象
可以直接通过VM实例访问这些方法，或者在指令表达式中使用
方法中的this自动绑定为Vue实例
methods中所有的方法同样也被代理到了Vue实例对象上，都可以通过this访问
注意，不应该使用箭头函数来定义method函数。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向Vue实例

<div id="app">
        {{fn()}}
        <p>{{count}}</p>
        <button v-on:click="fn1">点击增加</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data: {
                count: 100
            },
            methods: {
                fn: function(){
                    console.log('我被调用了')
                },
                fn1(){
                    this.count++
                }
            }
        })    
    </script>

理解和使用插值表达式
基础-术语解释-插值表达式（重要）
作用：会将绑定的数据实时的显示出来
形式：通过{{插值表达式}}包裹的形式
用法：{{js表达式、三元运算符、方法调用等}}

<div id="app">
        <p>{{1+2+3}}</p>
        <p>{{1>2}}</p>
        <p>{{name+'很帅'}}</p>
        <p>{{count+1}}</p>
        <p>{{count === 1?"成立":"不成立"}}</p>
        <p>{{list}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                name: '小屁孩',
                count: 1,
                list: [1,2,3].reverse()
            }
        })
    </script>

基础-术语解释-指令（重要）
指令（Directives）是带有v-前缀的特殊特性
指令特性的值预期是单个JavaScript表达式（v-for是例外情况，我们稍后再讨论）
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM
指令位置：起始标签

基础-系统指令-V-TEXT和V-HTML
很像innerText和innerHTMLv-text：更新标签中的内容
v-text：更新标签中的内容
v-text和插值表达式的区别：
v-text 更新 整个 标签中的内容
插值表达式：更新标签中局部的内容
可以渲染内容中的html标签

<div id="app">
        <p v-text="msg">我是小白龙 {{我是铁蛋儿}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '我是铁蛋儿'
            }
        })
    </script>

基础-系统指令-V-IF和V-SHOW
使用：v-if和v-show后面跟着表达式的值是布尔值，布尔值来决定该元素显示隐藏
注意：v-if是直接决定元素的 添加 或者删除 而 v-show只是根据样式来决定 显示隐藏
v-if 有更高的切换开销
v-show 有更高的初始渲染开销
如果我们需要非常频繁地切换，则使用v-show较好
如果在运行时条件很少改变，则使用v-if较好

<div id="app">
        <p v-if="isShow">我是小白龙</p>
        <p v-show="isShow">我是铁蛋儿</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: false
            }
        })
    </script>

基础-系统指令-V-ON绑定事件
使用：
第一种：v-on：事件名="方法名"
第二种：@事件名="方法名"的方式

// v-on:xx事件名='当触发xx事件时执行的语句' <button v-on:click="fn">按钮</button>
// v-on的简写方法 
<button @click="fn">按钮</button>

//修饰符 
使用:@事件名.修饰符="方法名" 
.once - 只触发一次回调 
.prevent - 调用 event.preventDefault() 阻止默认事件
// v-on修饰符 如 once: 只执行一次 
<button @click.once="fn">只执行一次</button> 
// v-on修饰符 如 prevent: 阻止默认事件 <button @contextmenu.prevent="fn">阻止默认事件</button>

基础-系统指令-V-FOR（数组）
v-for指令基于一个数组来渲染一个列表
v-for语法item in items 或者 item of items
其中items是源数据数组 而 item则是被迭代的数组元素的别名

<div id="app">
        <p v-for="item in list">{{item}}</p>
        <p v-for="(item,index) in list" :key="index">{{item}}---{{index}}</p>
        <p v-for="item in json">{{item}}</p>
        <p v-for="(item,key) in json">{{item}}--{{key}}</p>
        <p v-for="(item,key,index) in json">{{item}}--{{key}}--{{index}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: ['a', 'b', 'c'],
                json: {
                    name: '铁蛋儿',
                    age: 18
                }
            }
        })
    </script>