初遇vue

可达鸭miss

已于 2022-02-27 18:56:15 修改

阅读量350

点赞数

文章标签： vue.js 前端 javascript

于 2022-02-24 20:28:23 首次发布

本文链接：https://blog.csdn.net/weixin_57110180/article/details/123118328

版权

本文介绍了Vue.js的基本概念、特点和安装方式，并通过实例展示了如何创建应用、文本渲染、属性绑定、条件渲染及列表渲染等核心特性。Vue.js是一个轻量级的渐进式框架，以其简单高效和丰富的生态系统受到开发者欢迎。

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

概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

特点：简单，高效，生态丰富（插件多）

安装

1. 直接引用script

<script src="https://unpkg.com/vue@next"></script>

2. 安装脚手架

npm install -g @vue/cli

着手

createApp 函数创建一个新的应用实例

    <div id="app">{{text}}</div>

    <script>
		const app = Vue.createApp({
  			data() {
    				return { text: "Hello Vue!" }
 			 }
		})
		const vm = app.mount('#app')
		console.log(vm.text) // => "Hello Vue!"
	 </script>

Vue模板语法介绍

指令是带有 v- 前缀的特殊 attribute。

指令的属性值预期是单个 JavaScript 表达式

Vue模板语法--文本渲染

{{ }} 语法

<div class="app"> {{msg}}</div>
<script>
const app = Vue.createApp({
  data() {
       return { 
            msg: ‘你好Vue3’ 
               } 
          }
  })
const vm = app.mount('#app')
</script>

{{ }} 中的表达式

{{a}} //值绑定

{{a++}} //简单的计算

{{a===b ?a:b}} //三元运算等

注意：每个绑定都只能包含单个表达式

v-text指令

指令是带有 v- 前缀的特殊属性。

<div v-text="msg"> {{msg}}</div>

v-html指令

为了输出真正的 HTML，你需要使用v-html

<--如果a="<strong>111</strong>222"-->
<div v-html="a"></div> <--   <strong>111</strong>222  -->
<div v-text="a"></div> <--    111222   -->
<div >{{a}}</div>      <--   <strong>111</strong>222  -->

Vue模板语法-属性渲染

指令参数

一些指令能够接收一个“参数"，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<div v-bind:title="title"> Hello Vue !</div>

属性渲染

我们可以使用v-bind指令给html标签动态的绑定属性。

<button v-bind:disabled="canUse">按钮</button>
//控制canUse的值来改变按钮可不可用

属性渲染简写

v-bind可以简写为：

<button :disabled="canUse">按钮</button>
<div :title="title"> Hello Vue！</div>

class绑定

可以传给 :class (v-bind:class 的简写)

<div :class="a==b？active:''"></div>

条件渲染

`v-if 有条件的渲染一处内容`

v-else：使用 v-else 指令来表示 v-if 的“else 块”。v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，是 v-if 的“else-if 块”，并且可以连续使用。与 v-else 的用法类似，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>d</div>

`v-show`

<h1 v-show="ok">Hello Vue!</h1>

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display CSS property。

`v-if` 和 `v-show的区别`

如果需要非常频繁地切换，则使用 v-show 较好；

如果在运行时条件很少改变，则使用 v-if 较好。

v-show 只是简单地切换元素的 display CSS property。

列表渲染

用 v-for 把一个数组映射为一组元素

<ul id="ip">
  <li v-for="(item , index) in items" :key="item">
      {{item.name}}-{{index}}
  </li>
</ul>


Vue.createApp({
  data() {
    return {
      items: [{ name: 'rookie' }, { name: 'lt' }]
    }
  }
}).mount('#ip')