1.初识Vue

一套用于构建用户界面的渐进式的JavaScript框架。

2.特点

• 1.采用组件化模式，提高代码复用率，且让代码更好复用。
• 2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。
• 3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
• 4.一旦data中的数据发生改变，页面上的数据也会改变。

3.入门案例

引入js库

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

创建vue实例

<div id="root">
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
</div>
    
<script type="text/javascript" >
    Vue.config.productionTip = false

    //创建vue实例
    new Vue({
        el:"#root",         //el指定当前vue实例为那个容器服务，通常为css选择器字符串
        data:{              //data用于存储数据
            name:'你好',
            age:18
        }
    })
</script>

效果

4.模板语法

• 插值语法

  功能：用于解析标签体内容

  语法：{{}}

• 指令语法

  功能：解析标签属性，解析标签体内容，绑定事件

  语法：v- 开头

<div id="root">
    <h1>{{sc.name}}</h1>
    <a :href="sc.url">4399</a>
</div>

<script type="text/javascript" >
    Vue.config.productionTip = false
    //创建vue实例
    new Vue({
        el:"#root",         
        data:{              
            sc:{
                name:"tom",
                url:'http://www.4399.com'
            }
        }
    })
</script>

5.数据绑定

• 单向数据绑定

  特点：数据只从data流向页面

• 双向数据绑定

  特点：数据不仅能从 data 流向页面，还能从页面流向 data

<div id="root">
    <!--普通写法-->
    单向数据绑定：<input type="text" v-bind:value="name">
    <br/>
    双向数据绑定：<input type="text" v-model:value="name">
    <h1>{{name}}</h1>

    <!--简写-->
    单向数据绑定：<input type="text" :value="name">
    <br/>
    双向数据绑定：<input type="text" v-model="name">
    
    <!--错误的，因为v-model只能应用在表单元素中-->
    <h2 v-model:x="name"></h2>
</div>

    <script type="text/javascript" >
        Vue.config.productionTip = false
        //创建vue实例
        new Vue({
            el:"#root",       
            data:{ 
                name:"你好"
            }
        })
    </script>