Vue基础语法

第一个Vue实例

安装和使用

  1. 直接使用<script>引入

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

image-20201102151314989

  1. 使用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的值和divid属性相对应,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-textVue中的一个指令,指令中是一个变量,<h1>中会显示这个变得值

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

image-20201102154548723

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

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

image-20201102154548723

v-textv-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实例中的titlediv元素中的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:计算属性,将firstNamelastName的数据组合成fullName进行返回,如果firstNamelastName数据没有改变,fullName不会重新计算,而是使用上一次计算的缓存值

GIF 2020-11-2 16-45-25

侦听器

<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

  • 判断指令
  • showtrue时,Hello Vue显示
  • showfalse时,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的值不能相同

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!