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

本文链接：https://blog.csdn.net/qq_35175995/article/details/98079810

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

摘要由CSDN通过智能技术生成

一、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里面的值-->