Vue3
Vue是一套构建用户界面的渐进式框架。只关注视图层， 采用自底向上增量开发的设计。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
引入 Vue 的 JS 文件：
<script src="https://unpkg.com/vue@next"></script>
data 选项：
是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。
const app = Vue.createApp({
data() {
return { count: 4 }
}
})
const vm = app.mount('#app')
document.write(vm.$data.count) // => 4
document.write("<br>")
document.write(vm.count) // => 4
document.write("<br>")
// 修改 vm.count 的值也会更新 $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// 反之亦然
vm.$data.count = 6
document.write(vm.count) // => 6
方法：
const app = Vue.createApp({
data() {
return { count: 4 }
},
methods: {
increment() {
// `this` 指向该组件实例
this.count++
}
}
})
const vm = app.mount('#app')
document.write(vm.count) // => 4
document.write("<br>")
vm.increment()
document.write(vm.count) // => 5
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
<div id="app">
<p>{{ message }}</p>
</div>
{{...}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{...}} 标签内容也会更新。
如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。
<span v-once>这个将不会改变: {{ message }}</span>
使用 v-html 指令用于输出 html 代码：
<div id="example1" class="demo">
<p>使用双大括号的文本插值: {{ rawHtml }}</p>
<p>使用 v-html 指令: <span v-html="rawHtml"></span></p></div>
<script>
const RenderHtmlApp = {
data() {
return {
rawHtml: '<span style="color: red">这里会显示红色！</span>'
}
}
}
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>
HTML 属性中的值应使用 v-bind 指令。
<div v-bind:id="dynamicId"></div>
对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。
<button v-bind:disabled="isButtonDisabled">按钮</button>
<div id="app">
<label for="r1">修改颜色</label>
<input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}"> v-bind:class 指令 </div></div>
<script> const app = { data() { return { use: false
}
}
}
Vue.createApp(app).mount('#app')
</script>
Vue.js 都提供了完全的 JavaScript 表达式支持。
<div id="app"> {{5+5}}
<br>
{{ ok ? 'YES' : 'NO' }}
<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div> </div>
<script> const app = {
data() {
return {
ok: true, message: 'RUNOOB!!', id: 1
}
}
}
Vue.createApp(app).mount('#app')
</script>
</script>
v-if 指令将根据表达式 的值( true 或 false )来决定是否执行被包含的代码
可以用 v-else 指令给 v-if 添加一个 "else" 块
v-else-if 即 v-if 的 else-if 块，可以链式的使用多次
v-for 指令可以绑定数组的数据来渲染一个项目列表。
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.text }}
</li>
</ol>
</div>
<script>
const app = {
data() {
return {
sites: [
{ text: 'Google' },
{ text: 'Runoob' },
{ text: 'Taobao' }
]
}
}
}
Vue.createApp(app).mount('#app')
</script>
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性。
v-on 指令，它用于监听 DOM 事件：
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
- text 和 textarea 元素使用
value属性和input事件； - checkbox 和 radio 使用
checked属性和change事件； - select 字段将
value作为属性并将change作为事件。
v-show 指令来根据条件展示元素
每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。
一个应用需要被挂载到一个 DOM 元素中。
注册一个全局组件：
const app = Vue.createApp({...})
app.component('my-component-name', {
/* ... */
})
my-component-name 为组件名，/* ... */ 部分为配置选项。注册后，我们可以使用以下方式来调用组件：
<my-component-name></my-component-name>
局部组件：
const ComponentA = {
/* ... */
}
const ComponentB = {
/* ... */
}
const ComponentC = {
/* ... */
}
然后在 components 选项中定义你想要使用的组件：
const app = Vue.createApp({
components: {
'component-a': ComponentA,
'component-b': ComponentB
}})
对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字（component-a、component-b），其属性值就是这个组件的选项对象（ComponentA、ComponentB）。
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。
组件可以为 props 指定验证要求。
为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
Vue 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库
引入样式：<script src="https://unpkg.com/vue-router@4"></script>
使用一个自定义组件 router-link 来创建链接。
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。
Vue 版本推荐使用 axios 来完成 ajax 请求。
引入样式：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Vue.axios.get(api).then((response) => { console.log(response.data) }) this.axios.get(api).then((response) => { console.log(response.data) }) this.$http.get(api).then((response) => { console.log(response.data) })
get方法：（获取json数据）
const app = {
data() {
return {
info: 'Ajax 测试!!'
}
}, mounted () {
axios .get('https://www.runoob.com/try/ajax/json_demo.json')
.then(response => (this.info = response))
.catch(function (error) {
// 请求失败处理 console.log(error);
});
} }
Vue.createApp(app).mount('#app')
GET 方法传递参数：
// 直接在 URL 上添加参数 ID=12345
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response); })
.catch(function (error) {
console.log(error); });
// 也可以通过 params 设置参数：
axios.get('/user', {
params: { ID: 12345 } })
.then(function (response) {
console.log(response); })
.catch(function (error) {
console.log(error); });
post方法：
new Vue({
el: '#app', data () {
return { info: null } },
mounted () {
axios .post('https://www.runoob.com/try/ajax/demo_axios_post.php')
.then(response => (this.info = response))
.catch(function (error) {
// 请求失败处理 console.log(error); }); } })
POST 方法传递参数：
axios.post('/user', {
firstName: 'Fred',
// 参数 firstName lastName: 'Flintstone'
// 参数 lastName })
.then(function (response) {
console.log(response); })
.catch(function (error)