初学Vue_vue foo bar

【内容较为不完善，后续会逐渐补全，先挖个坑】

Vue基础

Vue 是一个用于构建用户界面的渐进式 JavaScript 框架。

渐进式：

• vue弱主张（对比其他框架，）
• 可在原有项目的基础上使用 script 标签引入，如JQuery
• 也可用vue全家桶构建完整项目（v-cli、v-router、vuex、axios）
• 需先安装node.js、npm 、v-cli

与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue中文版官网

Vue的下载安装

Vue的下载安装

模板语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

文本

最基本的数据绑定形式是文本插值，它使用的是双大括号语法：

<span>Message: {{ msg }}</span>
1

标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

data(){
    return {
        msg:"hello vue!"
    }
}
1
2
3
4
5

原始html

双大括号会将数据解释为纯文本，而不是 HTML 代码。若想插入 HTML ，你需要使用 v-html 指令：

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
1
2

data(){
    return {
        rawHtml:"<span style="color: red">This should be red.</span>"
    }
}
1
2
3
4
5

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y6sT1z6j-1664891037857)(D:\东师\蓝旭\自学自讲\图片集\5.1.jpg)]

这里看到的 v-html 属性被称为一个指令。指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊属性，你可能已经猜到了，它们将为渲染的 DOM 应用特殊的响应式行为。这里我们做的事情简单来说就是：在当前组件实例上，将此元素的 innerHTML 与 rawHtml 属性保持同步。

attribute绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>
1

data(){
    return {
        dynamicId:111
    }
}
1
2
3
4
5

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

简写

因为 v-bind 非常常用，因此提供了特定的简写语法：

<div :id="dynamicId"></div>
1

data(){
    return {
        dynamicId:111
    }
}
1
2
3
4
5

开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。

布尔型 Attribute

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。

v-bind 在这种场景下的行为略有不同：

<button :disabled="isButtonDisabled">Button</button>
1

当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

使用 JavaScript 表达式

Vue.js 提供了完全的 JavaScript 表达式支持。

<span>{{number+1}}</span>
<span>{{ok?'yes':'no'}}</span>
<span>{{message.split('').reverse().join('')}}</span>
1
2
3

这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。

但是每个绑定只能包含单个表达式，以下例子不会生效。

<!-- 是语句，不是表达式 -->
<span>{{var a=1;}}</span>

<!-- 流程控制不会生效，请使用三元表达式 -->
<span>{{if(ok){return message}}}</span>
1
2
3
4
5

条件渲染

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>
1

v-else

你也可以使用 v-else 为 v-if 添加一个“else 区块”。

<button @click="awesome = !awesome">Toggle</button>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/258517