第一个Vue实例

安装和使用

1. 直接使用<script>引入

   在Vue官网中下载开发版本的Vue.js，在项目使用<script>标签进行引入

2. 使用CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

编写实例

<div>{{msg}}</div>

new Vue({
    el: "#root",
    data: {
        msg: "Hello Vue"
    }
})

• el：挂载点 挂载要操作的DOM元素
• data：页面中要渲染的数据

挂载点，模板与实例

挂载点

<div></div>

new Vue({
    el: "#root",
    data: {
        msg: "Hello Vue"
    }
})

div元素就是Vue实例的挂载点，因为Vue实例的el的值和div的id属性相对应，Vue只会处理挂载点下的内容

模板

<div id="root">
    <h1>{{msg}}</h1>
</div>

new Vue({
    el: "#root",
    data: {
        msg: "Hello Vue"
    }
})

在挂载点内部的内容都称为模板

模板还可以写在Vue实例中

new Vue({
    el: "#root",
    template:"<h1>{{msg}}</h1>",
    data: {
        msg: "Hello Vue"
    }
})

实例

在Vue实例中，只需要指定一个挂载点，和要渲染的数据，Vue会自动的结合模板和数据，生成最终要展示的内容，然后把内容放在挂载点中`

Vue中的数据，事件和方法

数据

在Vue实例的数据项中，可以配置任意的数据名字在模板中使用

{{}}这种语法叫做插值表达式

<div id="root">
    <h1>{{num}}</h1>
</div>

new Vue({
    el: "#root",
    data: {
        num:123
    }
})

除了使用插值表达式，还可以使用v-text v-text是Vue中的一个指令，指令中是一个变量，<h1>中会显示这个变得值

<div id="root">
    <h1 v-text></h1>
</div>

使用v-html这个指令也可以达到这个效果

<div id="root">
    <h1 v-html></h1>
</div>

v-text和v-html的区别：

• v-tetx会把html语句转义
• v-html不会把html语句转义

事件/方法

<div id="root">
    <p v-on:click = "handleClick">{{msg}}</p>
</div>

new Vue({
    el: "#root",
    data: {
        msg: "Hello Vue",
        num:123
    },
    methods:{
        handleClick: function() {
            alert(123)
        }
    }
})

• v-on:：往html元素上绑定事件 后面跟一个函数，当点击p标签时，会执行handleClick函数中的alert的方法 ，也可以简写成 @ 符号
• methods：所有执行的方法都放在Vue实例的methods方法里面

属性绑定和双向数据绑定

属性绑定

<div id="root">
    <div v-bind:title="this is div">Hello Vue</div>
</div>

new Vue({
    el: "#root",
    data: {
        title: "this is div"
    }
})

v-bind：

• 属性绑定指令
• 将Vue实例中的title与div元素中的title属性进行绑定，div元素的title值就是Vue实例中title的值

v-bind: 可以简写成: v-bind:title = :title

v-bind:title= 当使用模板指令是，= 后面的内容不再是字符串，而是JS表达式

双向数据绑定

双向绑定和单向绑定的区别

• 单向绑定：数据可以决定页面的内容，但是页面不能决定数据的内容
• 双向绑定：数据可以操作页面，页面可以操作数据

<div id="root">
    <input v-model="content" />
    <div>{{content}}</div>
</div>

new Vue({
    el: "#root",
    data: {
        title: "this is div",
        content: "this is content"
    }
})

v-model：双向绑定语法，它会根据控件类型自动选取正确的方法来更新元素

Vue中计算属性和侦听器

<div id="root">
    姓: <input v-model="firstName" />
    名: <input v-model="lastName" />
    <div>{{fullName}}</div>
</div>

new Vue({
    el: "#root",
    data: {
        firstName: "",
        lastName: "",
    },
    computed: {
        fullName: function () {
            return this.firstName + " " + this.lastName
        }
    }

computed：计算属性，将firstName和lastName的数据组合成fullName进行返回，如果firstName和lastName数据没有改变，fullName不会重新计算，而是使用上一次计算的缓存值

侦听器

<div id="root">
    姓: <input v-model="firstName" />
    名: <input v-model="lastName" />
    <div>{{fullName}}</div>
    <div>{{count}}</div>
</div>

new Vue({
    el: "#root",
    data: {
        firstName: "",
        lastName: "",
        count: 0
    },
    computed: {
        fullName: function () {
            return this.firstName + " " + this.lastName
        }
    },
    watch: {
        fullName: function () {
            this.count++
        }
    }
})

watch：监听数据的变化，·fullName·数据发生变化，·count·属性就会进行改变

v-if v-show v-for指令

v-if

<div id="root">
    <div v-if="show">Hello Vue</div>
    <button @click="handleClick">toggle</button>
</div>

new Vue({
    el: "#root",
    data: {
        show: true
    },
    methods: {
        handleClick: function () {
            this.show = !this.show
        }
    }
})

v-if：

• 判断指令
• 当show为true时，Hello Vue显示
• show为false时，Hello Vue隐藏
• 隐藏时，会把元素从DOM中删除

v-show

<div id="root">
    <div v-show="show">Hello Vue</div>
    <button @click="handleClick">toggle</button>
</div>

new Vue({
    el: "#root",
    data: {
        show: true
    },
    methods: {
        handleClick: function () {
            this.show = !this.show
        }
    }
})

v-show：

• 作用与v-if差不多，唯一不同的是不会删除元素，而是给元素添加display:none属性

v-for

<div id="root">
    <ul>
        <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
</div>

new Vue({
    el: "#root",
    data: {
        list: [1, 2, 3, 4, 5]
    },
})

v-for：

• 循环数据项
• 循环list中的数据，并把每次循环的数据放到li元素中
• 需要添加key属性，并且每个key的值不能相同