Vue入门1：基础语法

echola_mendes

已于 2024-07-19 18:16:22 修改

阅读量697

点赞数 34

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2024-07-19 17:58:13 首次发布

本文链接：https://blog.csdn.net/qq_36451127/article/details/140520500

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

个人喜欢将复杂概念简单化，此文不做过多概念点的赘述，通过🌰案例来理解和巩固知识点，由浅入深，具体概念可参考官方文档：https://cn.vuejs.org/

6、v-if/ v-else-if / v-else、v-show、v-for

适合人群：需要HTML、CSS和JavaScript前端基础

环境要求：Node和一个Vue编译器（VS Code /Sublime Text）

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面

学习任何技术，当然是一个Hello World了，在VS Code创建一个hello.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
  {{msg}}
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      msg: 'Hello World!'
    }
  })
</script>
</body>
</html>

效果：Hello World!

等同于

var dom = document.getElementById("root") 
dom.innerHTML = "Hello World!"

由此可见Vue更偏向数据的操作，Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM

一、Vue属性

前面用到了new Vue()对象，以及属性el、data，这里简单叙述下

1、el：指令绑定到的元素，这可以用于直接操作 DOM

2、data：用于保存设置的数据或请求的数据

3、method：需要调用的方法，用于处理用户交互、‌数据计算等逻辑

4、template：可以替换一些页面的元素

5、computed：计算属性，可以执行更复杂的逻辑计算

6、watch：监听器，用于在数据更改时调用的侦听回调

7、props：用于组件的传值，接收摆布数据

8、render：渲染器，可以创建虚拟的DOM

二、Vue指令

Vue的指令是一种特殊的属性，以v-为前缀，用于在HTML元素上添加特殊的行为。这些指令允许开发者在Vue应用中动态地绑定数据、处理用户输入、控制元素的显示与隐藏

1、v-text

更新元素的textContent

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

2、v-html

更新元素的innerHTML，会将msg内容进行转义

<div id="root">
  <h1 v-html="msg"> </h1>
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      msg: "<h1>Hello Vue!</h1>"
    }
  })
</script>

效果：Hello Vue!

3、v-on

或简写为“@”，监听DOM事件，如点击、键盘输入等

案例：实现点击Hello Vue!时，弹出文字的功能

<div id="root">
  <!-- v-on:click 可简写成 @click-->
  <div v-on:click="handleClick">{{msg}}</div>
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      msg: "Hello Vue!"
    },
    methods: {
      handleClick: function () {
        alert("echola")
      }
    }
  })
</script>

效果：点击Hello Vue!，弹出echola！

如果想要改变msg中的数据时，只需要修改变量值msg

handleClick: function () {
        this.msg="echola"
}

4、v-bind

或简写为“:”，属性绑定，动态地绑定一个或多个属性，或一个组件prop到表达式

案例：实现当鼠标悬停在文字上，显示提示语的功能

<div id="root">
  <!-- v-bind:title 可简写成 :title-->
  <div v-bind:title="title"> Hello Vue! </div>
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      title:"This is echola!"
    }
  })
</script>

效果：

5、v-model

双向数据绑定，在表单输入和应用状态之间创建双向数据绑定

🌰案例：实现当输入框输入文字中，下方显示相同文字的功能

<div id="root">
  <input v-model="content">
  <div>{{content}}</div>
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      content:"Hello echola!"
    }
  })

手动输入Haaa……，表单和下方文本框同步输出Hello echola! Haaa……

效果：

🌰案例：实现一个姓和名拼接的功能

<div id="root">
  <input v-model="firstName">
  <input v-model="lastName">
  <div>{{fullName}}</div>
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      firstName:"",
      lastName:""
    },
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

这里使用了compute计算属性，而不是直接在模版中计算

 <div>{{firstName}}{{lastName}}</div>

效果：

上面使用到了computed计算属性，那么如果要监听到属性变化，就需要使用到watch监听器了

🌰案例：实现当输入框文字变化时，显示修改次数的功能

<div id="root">
  姓：<input v-model="firstName">
  名：<input v-model="lastName">
  <div>{{fullName}}</div>
  <div>{{count}}</div>
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      firstName:"",
      lastName:"",
      count: 0
    },
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName
      }
    },
    watch: {
      firstName() { 
        this.count++  //监听firstName
      },
      lastName(){
        this.count++  //监听lastName
      }
    }
  })
</script>

效果：

6、v-if/ v-else-if / v-else、v-show、v-for

v-if/ v-else-if / v-else：条件渲染，根据表达式的值，决定是否渲染元素

v-show：根据绑定值的真伪，切换元素的display CSS属性为none或原始值，可触发过渡效果

v-for：基于数组或对象渲染一个列表

🌰案例：实现一个点击"是否隐藏"按键，隐藏和显示“Hello Vue!”的功能

<div id="root">
  <div v-if="show">Hello Vue!</div>
  <button @click="handleClick">是否隐藏按键</button>
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      show:true
    },
    methods: {
      handleClick(){
        this.show = !this.show
      }
    }
  })
</script>

效果：

将v-if替换成v-show，效果虽然一样，v-if是将整个语句移除，但v-show只是将div标签中添加了style="display:none"的隐藏样式

 <div v-show="show">Hello Vue!</div>

🌰案例：将list数组中的值，循环展示出来的功能

<div id="root">
  <ul v-for="item of list">
      <li>{{item}}</li>
 </ul>
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      list:[1,2,3]
    }
  })
</script>

效果：

🔖练习：在输入框输入数据，并循环输出到list中

<div id="root">
  <div>
    <input type="text" v-model="inputValue">
    <button @click="submitData">提交</button
  </div>
 <ul v-for="item of list" :key="item">
  <li>{{item}}</li>
 </ul>
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      inputValue: '',
      list:[]
    },
    methods: {
      submitData() {
        this.list.push(this.inputValue)
      } 
   }
  })
</script>

效果：

如果每次输入后，清空输入框中的数据，那么只需添加this.inputValue = ''

 submitData() {
        this.list.push(this.inputValue)
        this.inputValue = ''
      }

三、Vue组件

Vue组件（Component）是Vue最核心的功能部分，允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个组件内封装自定义内容与逻辑

Vue组件使用Vue.component，因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项

Vue.component('component-name', {
  data:……
})

如下，定义了一个名为“todo-item”的全局组件，就可以直接复用该组件名的标签

<div id="root">
  <ul>
    <todo-item></todo-item>
    <todo-item></todo-item>
   </ul>
</div>
<script>
  //全局组件
  Vue.component("todo-item",{
    template:'<li>item</li>'
  })
</script>

局部组件

<div id="root">
  <ul>
    <todo-item></todo-item>
    <todo-item></todo-item>
   </ul>
</div>
<script>  
  //局部组件
  var todoItem={
    template:'<li>item</li>'
  }

  new Vue({
    el: '#root',
    components: {
      "todo-item": todoItem  //组件声明
    }
  })
</script>

全局组件和局部组件的区别：

1、使用范围不同，全局组件可以在页面中任何位置使用，局部组件只能在定义它的el中使用，能再不其他位置使用，否则就无法生效。

2、定义组件的方法不同，全局组件可以使用Vue.component定义，局部组件可以通过vue实例中component属性定义

用Vue组件复现上面练习的代码

<div id="root">
  <div>
    <input type="text" v-model="inputValue">
    <button @click="submitData">提交</button
  </div>
  <ul>
    <todo-item v-for="(item,index) of list" 
               :key="index" 
               :content="item"></todo-item>
   </ul>
</div>
<script>
  //全局组件
  Vue.component("todo-item",{
    props: ['content'],
    template:'<li>{{content}}</li>'
  })

  new Vue({
    el: '#root',
    data: {
      inputValue: '',
      list:[]
    },
    methods: {
      submitData() {
        this.list.push(this.inputValue)
        this.inputValue = ''
      } 
    }
  })
</script>

效果：

四、Vue-cli使用

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，可以方便地创建Vue项目，并提供了许多常用功能的预设，比如ESLint代码检查、Babel转译、单元测试工具、CSS预处理器、服务器代理等等

1、安装Vue-cli

npm install -g @vue/cli

报错：

npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
npm ERR! request to https://registry.npm.taobao.org/@vue%2fcli failed, reason: certificate has expired

原因：淘宝原镜像域名（registry.npm.taobao.org）的 HTTPS 证书正式到期。如果想要继续使用，需要将 npm 源切换到新的源（registry.npmmirror.com

解决：

// 1. 清空缓存
npm cache clean --force
 
// 2. 切换新源
npm config set registry https://registry.npmmirror.com

// 3.检查镜像
npm config get registry

// 4.安装Vue-cli
sudo npm install -g @vue/cli

2、创建vue项目

在项目目录，执行一下创建项目的命令vue create hello-world，默认创建vue3项目

vue create hello-world

顺带说明下vue init webpack project-name命令也可以创建项目，但只能创建vue2项目

vue init webpack project-name

执行成功：

然后执行

cd hello-world

npm run serve

此处使用的npm run serve 是vue-cli3.0版本使用的， npm run dev 是vue-cli2.0版本使用的

运行项目成功：

访问：http://localhost:8080/，显示以下页面便是成功启动项目了

项目文件目录：

持续更新中，敬请期待，哈哈哈……

echola_mendes

关注

34
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
Vue入门1：基础语法

个人喜欢将复杂概念简化，不做过多概念点的赘述，通过案例来理解和巩固知识点，由浅入深……：需要HTML、CSS和JavaScript前端基础Node和一个Vue编译器（VS Code /Sublime Text）Vue (发音为 /vjuː/，类似) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
复制链接

扫一扫

专栏目录