简介

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

安装

• 在页面上以 CDN 包的形式导入。

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

• 下载 JavaScript 文件并自行托管。
  https://cdn.jsdelivr.net/npm/vue@next/dist/
  https://unpkg.com/browse/vue@3.2.21/dist/
• 使用 npm 安装它。
  建议将 NPM 源设置为国内的镜像，可以大幅提升安装速度

npm install vue@next
npm install -D @vue/compiler-sfc //单文件组件配套工具

• 使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。

yarn global add @vue/cli
# 或
npm install -g @vue/clivue upgrade --next

创建vue

<script src="https://unpkg.com/vue@next"></script>
<div id="hello-vue" class="demo">{{ message }}
</div><script>
const HelloVueApp = {data() { //data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。//它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。return {message: 'Hello Vue!!'}}
}Vue.createApp(HelloVueApp).mount('#hello-vue') //hello-vue是渲染的起点const app = Vue.createApp({data() {return { count: 4 }},methods: {increment() {// `this` 指向该组件实例this.count++}}
})
const vm = app.mount('#app')
vm.$data.message = "a" // 修改 vm.message 的值也会更新 $data.message 
vm.message = "b" // 修改 vm.message 的值也会更新 $data.message 
vm.increment() // 调用方法
</script>

模板语法

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值
<div id="app"><p>{{ message }}</p>
</div>如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值
<span v-once>这个将不会改变: {{ message }}</span>使用 v-html 指令用于输出 html 代码
<p>使用 v-html 指令: <span v-html="rawHtml"></span></p>属性中的值应使用 v-bind 指令
<div v-bind:id="dynamicId"></div>对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来
<button v-bind:disabled="isButtonDisabled">按钮</button><!-- 完整语法 -->
<a v-bind:href="url"></a>
v-bind 缩写
<a :href="url"></a>Vue.js 都提供了完全的 JavaScript 表达式支持。
{{5+5}}<br>
{{ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<!--  这是语句，不是表达式：-->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}指令是带有 v- 前缀的特殊属性。
<div id="app"><p v-if="seen">现在你看到我了</p>
</div>事件
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
v-on 缩写
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>用户输入 在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
<div id="app"><p>{{ message }}</p><input v-model="message">
</div>

条件语句

条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示
<div id="app"><p v-if="seen">现在你看到我了</p>
</div>如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素
<div id="app"><template v-if="seen"><h1>网站</h1><p>Google</p><p>Runoob</p><p>Taobao</p></template>
</div>可以用 v-else 指令给 v-if 添加一个 "else" 块
<div id="app"><div v-if="Math.random() > 0.5">随机数大于 0.5</div><div v-else>随机数小于等于 0.5</div>
</div>v-else-if 即 v-if 的 else-if 块，可以链式的使用多次
<div id="app"><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>Not A/B/C</div>
</div>可以使用 v-show 指令来根据条件展示元素（更改display为none）
<h1 v-show="ok">Hello!</h1>

循环

循环使用 v-for 指令。
<div id="app">迭代数组<ol><li v-for="site in sites">{{ site.text }}</li></ol>v-for 还支持一个可选的第二个参数，参数值为当前项的索引<ol><li v-for="(site, index) in sites">{{ index }} -{{ site.text }}</li></ol>迭代对象<ul><li v-for="value in object">{{ value }}</li></ul>也可以提供第二个的参数为键名<ul><li v-for="(value, key) in object">{{ key }} : {{ value }}</li></ul>第三个参数为索引<ul><li v-for="(value, key, index) in object">{{ index }}. {{ key }} : {{ value }}</li></ul>迭代整数<ul><li v-for="n in 10">{{ n }}</li></ul>template使用循环<ul><template v-for="site in sites"><li>{{ site.name }}</li><li>--------------</li></template></ul>
</div><script>
const app = {data() {return {object: {name: '菜鸟教程',url: 'http://www.runoob.com',slogan: '学的不仅是技术，更是梦想！'}}}
}在自定义组件上，你可以像在任何普通元素上一样使用 v-for
<my-component v-for="item in items" :key="item.id"></my-component>为了把迭代数据传递到组件里，我们要使用 props
<my-componentv-for="(item, index) in items":item="item":index="index":key="item.id"
></my-component>

组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。

注册全局组件
const app = Vue.createApp({...})app.component('my-component-name', {/* ... */
})
注册后，我们可以使用以下方式来调用组件
<my-component-name></my-component-name>
例子
// 创建一个Vue 应用
const app = Vue.createApp({})// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {data() {return {count: 0}},template: `<button @click="count++">点了 {{ count }} 次！</button>`
})
app.mount('#app')
---------------------------------------------------
局部组件
const ComponentA = {/* ... */
}
const ComponentB = {/* ... */
}
const ComponentC = {/* ... */
}
const app = Vue.createApp({components: {'component-a': ComponentA,'component-b': ComponentB}
})
例子
<div id="app"><runoob-a></runoob-a>
</div>
<script>
var runoobA = {template: '<h1>自定义组件!</h1>'
}const app = Vue.createApp({components: {'runoob-a': runoobA}
})app.mount('#app')
</script>---------------------------------------------------
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"
<div id="app"><site-name title="Google"></site-namet><site-name title="Runoob"></site-namet><site-name title="Taobao"></site-name>
</div>
可以用 v-bind 动态绑定 props 的值到父组件的数据中<div id="app"><site-infov-for="site in sites":id="site.id":title="site.title"></site-info>
</div><script>
const app = Vue.createApp({})app.component('site-name', {props: ['title'],template: `<h4>{{ title }}</h4>`
})app.mount('#app')
</script>props的验证
Vue.component('my-component', {props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)propA: Number,// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 带有默认值的数字propD: {type: Number,default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].indexOf(value) !== -1}}}
})
type 可以是下面原生构造器：
String Number Boolean Array Object Date Function Symbol

计算属性