一文带你学会Vue3基本语法
Vue3 起步
- 1.通过 CDN 使用 Vue3
- 2.Vue3 模板语法
- 文本
- Html
- 属性
- 表达式
- 指令
- 参数
- 3.模板用户输入双向绑定
1.通过 CDN 使用 Vue3
你可以借助 script 标签直接通过 CDN 来使用 Vue：
通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成
接下来我们从 Hello Vue!! 的代码开始学起
{{ message }}
mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 中
{{ }} 用于输出对象属性和函数返回值
{{ message }} 对应应用中 message 的值
输出：
data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中
我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。
以下实例我们添加了 methods 选项，选项中包含了 increment() 方法：
2.Vue3 模板语法
Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
文本
数据绑定最常见的形式就是使用 {{...}}的文本插值：
{{ message }}
Html
使用 v-html 指令用于输出 html 代码：
属性
HTML 属性中的值应使用 v-bind 指令
v-bind:class 指令
demo：点击按钮可以实现div块变色
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持
例如：
算数表达式：{{521 + 1314}}
三目表达式：{{ok ? 'YES' : 'NO'}}
字符串反转：{{ message.split('').reverse().join('') }}
浏览器输出：
算数表达式：1835
三目表达式：YES
字符串反转：!FTCTSUMI
指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
现在你看到我了
这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素
另外还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：
- {{ site.text }}
参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定
也可以使用缩写：
另一个例子是 v-on 指令，它用于监听 DOM 事件：
...
...
...
3.模板用户输入双向绑定
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
{{ message }}
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：
{{ message }}