Vue2基础

一、引入vue.js

官网下载vue.js：https://cn.vuejs.org/v2/guide/installation.html

    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

创建vue实例

<script type="text/javascript">
    //config全局配置：阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false

    //先配置，后创建Vue实例
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

二、语法

app容器里的代码被称为【vue模板】
一个vue实例只能绑定一个容器

<div id="app">
  {{ message }}
</div>

1.插值语法

{{xxx}}为插值语法写法，xxx可以写js表达式

2.模板语法

v-bind绑定的元素为js表达式，是单向绑定，只能是数据流向页面
v-model为双向绑定，一般用于表单输入框中，可从data中流向页面，也可从页面流向data

<!-- 准备好一个容器 -->
<div id="root">
    <h1>插值语法</h1>
    <h2>hello,{{name}}</h2>
    <hr/>
    <h1>指令语法</h1>
    <!-- 单向绑定，简写形式 -->
    <a :href="url">只是跳转的路径，url为js表达式</a>
    <hr/>
    <!-- 单向绑定，只能是data中的数据流向页面 -->
    <input v-bind:value="desc"><br>
    <!-- 双向绑定，可从data中流向页面，也可从页面流向data -->
    <input v-model:value="desc"><br>
    <!-- 双向绑定简写：常用写法，因为双向绑定一般也用于可输入表单 -->
    <input v-model="desc">
</div>

二、el和data的两种写法

①vue配置el有两种写法，使用哪一种写法都可以，一种是直接创建vue实例时，将vue与容器绑定，一种是先创建vue实例后，再使用$mount将vue与容器绑定。
②配置data有两种写法，实际项目中需使用函数式写法。data属于vue所管理的函数，里面的this指向vue。
③vue管理的函数一定不能写成箭头函数。

<script type="text/javascript">
    //config全局配置：阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false
    //el配置第一种写法
    new Vue({
        el: '#root1',
        //data配置第一种写法，对象式写法
        data: {
            name: 'vue1',
            url: 'https://www.bilibili.com/video/BV1Zy4y1K7SH?p=7'
        }
    })
    new Vue({
        el: '#root2',
        //data配置第二种写法，函数式写法，function可省去
        data:function (){
            return{
                name:'vue2',
                url:'https://www.bilibili.com/video/BV1Zy4y1K7SH?p=7'
            }
        }
    })
    //el配置第二种写法，先实例一个vue对象，再使用$mount挂载
    const x = new Vue({
        //data配置第二种写法简写：data配置项目中常用写法
        data() {
            return {
                name: 'vue3',
                url: 'https://www.bilibili.com/video/BV1Zy4y1K7SH?p=7'
            }
        }
    })
    x.$mount("#root3")
</script>