Vue入门笔记（一）——基础语法_前端 vue中的this.show1 = !this.show1是什么意思?-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35175995/article/details/98079810

这篇博客详细介绍了Vue的基础语法，包括挂载点、模板、实例、数据绑定、双向绑定、计算属性、侦听器、v-if/v-show/v-for指令及自定义指令的使用。内容覆盖了Vue的基本操作和核心特性，是Vue初学者的入门指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Vue使用

官网：https://cn.vuejs.org
进入官网之后，打开 学习 -> 教程 ，点击左侧的 安装
在这里插入图片描述
开发版本：开发的时候使用，有很多警告，代码全（开发者下载）
生产版本：正式生产环境时候使用，删除警告的部分，经过压缩后

这里使用<script>标签引入，Vue会被注册成一个全局变量

二、挂载点，模板与实例

挂载点

是vue的一个基本点，需要在el属性中写明，所有的操作，都跟挂载点有关。你可以理解为一个id，vue的操作范围只有在这挂载点标签内部或者当前标签有效

模板

Vue的一个属性template，可以直接在里面写html标签以及内容，还有vue的一些东西。（下面会遇到）注意：使用Vue指令的时候不能使用模板，会使其失效，在Vue的生命周期中，有模板就加载模板

实例

就是我们new Vue（{}）里面的内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue入门</title>
        <script src="./vue.js"></script>
    </head>
    <body>
	<!--        这里的root就是挂载点 -->
    <div id="root">
        <!--        <h1>模板显示 {{msg}}</h1>   等于  下面的  template里面的值-->
    </div>
    </body>
    <script>
        new Vue({
            el: "#root",
            template: '<h1>模板显示 {{msg}}</h1>',
            data: {
                msg: "Hello Word!"
            }
        })
    </script>
    </html>

在这里插入图片描述

三、Vue实例中的数据，事件和方法

数据

Vue中的data属性，可以直接在html中通过{{param}}将数据显示出来，Vue中的对于数据的操作，可以通过this.param来操作

事件

Vue中会有一些事件的操作指令，例如：v-bind，v-model，v-click，v-text，v-html等

方法

Vue中的方法可以在methods属性中书写，类似于js的写法。

注意：不要在选项属性或回调上使用箭头函数，比如 methods: () => console.log(this.a) 或
vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this
会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function之类的错误。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue入门</title>
        <script src="./vue.js"></script>
    </head>
    <body>
      <!--        这里的root就是挂载点 -->
    <div id="root">
        <!--        <h1>模板显示 {{msg}}</h1>   等于  下面的  template里面的值-->
        <div v-text="content"></div>
        <div v-html="content"></div>
        <!--        这是Vue 的指令操作，注意text和html的区别  html会被浏览器编译，text不会被编译 -->
        <div v-on:click="handleClick">{{msg}}</div>
        <!--        绑定事件-->
        <div @click="handleClick">{{msg}}</div>
     	<!--        v-on: 省略写法 @-->
    </div>
    </body>
    <script>
        new Vue({
            el: "#root",
            // template: '<h1>模板显示 {{msg}}</h1>',
            data: {
                msg: "Hello Word!",
                content: "<h1>text</h1>"
            },
            methods:{
                handleClick : function () {
                    this.msg = "我改变了";
                }
            }
        })
    </script>
    </html>

三、Vue中属性的绑定和数据的双向绑定

数据的绑定

Vue中的数据绑定使用v-bind执行，后面直接写data属性的参数名

数据的双向绑定

Vue中的数据双向绑定，使用的是v-model就是显示的数据被修改之后，data中的数据也会被修改，不仅仅只是显示数据这么简单

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数据绑定和双向数据绑定</title>
        <script src="./vue.js"></script>
    </head>
    <body>
    <div id="root">
        <div v-bind:title=" 'add' + title">Hello World!</div>
        <!--  省略写法  -->
        <div :title="title">Hello World!</div>
        <!--  双向绑定v-model   -->
        <input v-model="content"/>
        <div>{{content}}</div>
    </div>
    </body>
    <script>
        new Vue({
            el: "#root",
            data:{
                title:"鼠标移动上去就会显示的内容",
                content:"this is content"
            }
        })
    </script>
    </html>

四、Vue中的计算属性和侦听器

计算属性

可以通过计算，得到一个新的数据属性，代码中的fullName就是这样被计算而得到的属性值

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

侦听器

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动，侦听属性watch。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
注意：有时候computed计算属性比watch更容易得到数据，并且代码更加的简洁

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性和侦听器</title>
        <script src="./vue.js"></script>
    </head>
    <body>
    <div id="root">
        姓：<input v-model="firstName"/>
        名：<input v-model="lastName"/>
        <div>{{firstName}}{{lastName}}</div>
        <div>{{fullName}}</div>
        <div>{{count1}}</div>
        <div>{{count2}}</div>
    </div>
    </body>
    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: '',
                lastName: '',
                count1: 0,
                count2: 0,
            },
            //计算属性，通过其他属性的计算结果，得到新的属性
            //再次显示会使用之前结果的缓存
            computed: {
                fullName: function () {
                    return this.firstName + ' ' + this.lastName;
                }
            },
            //侦听属性，监测属性的变化
            watch: {
                firstName: function () {
                    this.count1++
                },
                lastName: function () {
                    this.count1++
                },
                fullName:function () {
                    this.count2++
                }
            }
        })
    </script>
    </html>

五、v-if, v-show与v-for指令

v-if

条件判断使用 v-if 指令，可以通过这个指令显示/隐藏元素内容（ html中是添加一个样式display:none ）

v-show

我们也可以使用 v-show 指令来根据条件展示元素（在DOM树上将这个标签清除掉）

v-for

循环使用 v-for 指令。
v-for 指令需要以 item in list 形式的特殊语法， list 是源数据数组并且 item 是数组元素迭代的别名。

还有很多的指令可以去查看官网API：指令

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-if,v-show,v-for指令</title>
        <script src="./vue.js"></script>
    </head>
    <body>
    <div id="root">
        <div v-show="show">hello world</div>
        <div v-if="show">hello world</div>
        <button @click="handleClick">toggle</button>
        <ul->
            <!--   绑定一个唯一的key，增加渲染效率     -->
            <li v-for="item of list" :key="item">{{item}}</li>
            <!--   item有数据重复的时候，添加一个index属性，表示唯一的key   注意：如果排序，index会出现问题     -->
            <li v-for="(item,index) of list" :key="index">{{item}}</li>
        </ul->
    </div>
    </body>
    <script>
        new Vue({
            el: "#root",
            data: {
                show: true,
                list: [1, 2, 3]
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show;
                }
            }
        })
    </script>
    </html>

六、自定义指令

v-focus是一个自定义指令

全局指令

通过 Vue.directive注册的指令，可以全局使用，不被组件限制

    <div id="root">
        <p>页面载入时，input元素自动获取焦点</p>
        <input v-focus>
    </div>
    <script>
         //注册一个全局自定义指令
         Vue.directive('focus',{
             //当绑定元素插入到DOM中
             inserted:function (el) {
                 //获得焦点
                 el.focus()
             }
         })
    
        new Vue({
            el: "#root"
        })
    </script>

局部指令

通过directives属性注册的自定义指令，只能在当前组件内使用有效

    <div id="root">
        <p>页面载入时，input元素自动获取焦点</p>
        <input v-focus>
    </div>
    <script> 
        new Vue({
            el: "#root",
            directives: {
                // 注册一个局部的自定义指令 v-focus
                focus: {
                    // 指令的定义
                    inserted: function (el) {
                        el.focus()
                    }
                }
            }
        })
    </script>