前端开发 Vue

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

Vue中文文档，具体学习还是官方好：cn.vuejs.org/

Vscode创建代码片段

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：自定义文件名

{
	"vue htm": {
	//作用范围，删除即全局
		"scope": "html",
		//prefix固定的-自定义快捷键
		"prefix": "vuehtml",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"",
			"<head>",
			"    <meta charset=\"UTF-8\">",
			"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"    <title>Document</title>",
			"</head>",
			"",
			"<body>",
			"    <div id=\"app\">",
			"",
			"    </div>",
			"    <script src=\"vue.min.js\"></script>",
			"    <script>",
			"        new Vue({",
			"            el: '#app',",
			"            data: {",
			"                $1",
			"            }",
			"        })",
			"    </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "my vue template in html"
	}
}

保存好，新建一个html文件输入之前定义的快捷键vuehtml然后tab即可以快速生成代码片段

v-bind

被称为指令。指令带有前缀 v- 。除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

data: {
    message: '页面加载于 ' + new Date().toLocaleString()
}

<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令，此时title中显示的是模型数据-->
<h1 v-bind:title="message">我是标题</h1>

<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 :title="message">我是标题</h1>

v-model

双向数据绑定，会根据控件类型自动选取正确的方法来更新元素

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
输入：DAIHAO
Message is: DAIHAO

还可以绑定很多 v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件： text 和 textarea 元素使用 value 属性和 input 事件； checkbox 和 radio 使用 checked 属性和 change 事件； select 字段将 value 作为 prop 并将 change 作为事件

v-on

监听 DOM 事件，并在触发时运行一些 JavaScript 代码

<!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
<button v-on:click="search()">查询</button>

<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>

v-if

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

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

也可以用 v-else 添加一个“else 块”：

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

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

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

注意，v-show 不支持

谷粒商城分布式基础篇五