1. 绑定事件按按键修饰符
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>绑定事件和按键修饰符</title>
</head><body>
<div id="app">{{ person }}<hr/><button v-on:click="grow">老了一岁</button>
</div>
<script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const person = reactive({name: "ivan",age: 36});const grow = ()=>{person.age += 1;return person;}; return {person,grow // 函数对象也是需要返回的};}}).mount("#app");</script>
</body></html>
点击按键“老了一岁”，age递增1，运行结果如下：
2. 显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>显示和隐藏</title>
</head>
<body><div id="app"><!-- 条件渲染 -->{{ web }}<hr/><button v-on:click="toggle">切换显示状态</button><p v-show="web.show">This is a demo.</p><hr/><p v-if="web.show">This is a demo.</p><hr/><p v-if="web.user > 1000">This is a excellent website .</p><hr/><p v-else-if="web.user <= 1000">This is a new website.</p></div><script type="module">import { createApp, reactive } from "./vue.esm-browser.js"createApp({setup() {const web = reactive({show: true,user: 1000});const toggle = ()=> {web.show = !web.show;};return {web,toggle};}}).mount("#app")</script>
</body>
</html>
点击“切换显示状态”，运行结果：
3. 动态属性绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态属性绑定</title><style>.textColor{color: red;}</style>
</head>
<body><div id="app"><h3>v-bind:value="demo.com</h3><input type="text" v-bind:value="web.url"><h3>v-bind: src="web.img"</h3><img v-bind:src="web.img"/><h3>v-bind: class="textColor"</h3><b v-bind:class="{textColor:web.fontStatus}">demo</b></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp( {setup(){const web = reactive({url: "cxwn.demo.com",img: "demo.jpg",fontStatus: true});return {web};}}).mount("#app");</script>
</body>
</html>
运行结果：
4. 遍历数组和对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>遍历数组或对象</title>
</head>
<body><div id="app"><ul><li v-if="demo.key=`hobby`">{{ demo.hobby[0] }}</li></ul><hr/><ul><li v-for="(value, key, index) of demo">key: {{ key }} => value: {{ value }} => {{ index }}</li></ul><hr/><ul><li v-for="(value, index) of demo.course" :title="value.name" :key="value.id"><!--动态属性title和key主要左右是用于提升性能-->index: {{ index }} => value.id: {{ value.id }} => value.name: {{ value.name }}</li></ul><hr/><ul><!--标签可以用来包装多个元素或者多行代码, 不会在页面中渲染--><template v-for="(value, key) of demo.hobby"><li v-if="key == 2">key: {{ key }} => value: {{ value }}</li></template></ul></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js';createApp({setup() {const demo = reactive({name: "ivan",age: 20,hobby: [ "basketball", "table tennis", "baseball", "swimming" ],course: [{id: 1, name: "math",score: 90},{id: 2, name: "Chinese",score: 95}]});return {demo};}}).mount("#app");</script>
</body>
</html>
5. 双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>双向数据绑定</title>
</head>
<body><div id="app"><h2>文本框 {{ demo.text }}</h2><h2>单选框 {{ demo.radio }}</h2> <h2>复选框 {{ demo.checkbox }}</h2><h2>记住选择 {{ demo.remember }}</h2><h2>下拉列表 {{ demo.select }}</h2><hr/>单向数据绑定： <input type="text" :value="demo.text"/><hr/>单向数据绑定： <input type="text" v-model="demo.text"/><hr/><input type="radio" v-model="demo.radio" value="1"/>游泳<input type="radio" v-model="demo.radio" value="2"/>爬山<hr/><input type="checkbox" v-model="demo.checkbox" value="a"/>游泳<input type="checkbox" v-model="demo.checkbox" value="b"/>唱歌<input type="checkbox" v-model="demo.checkbox" value="c"/>徒步<hr/><input type="checkbox" v-model="demo.remember"/>记住选择<hr/><select v-model="demo.select"><option value="">请选择</option><option value="A">游泳</option><option value="B">徒步</option><option value="C">骑行</option></select></div><script type="module">import { createApp, reactive } from "./vue.esm-browser.js";createApp({setup() {const demo = reactive({text: "this is a demo.",radio:"",checkbox: [],remember: false,select: ""});return {demo}}}).mount("#app");</script>
</body>
</html>
运行结果：
6. v-model修饰符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-model修饰符</title>
</head>
<div id="app">URL: {{ web.url }}<br/>Users: {{ web.user }}<br>实时渲染<input type="text" v-model="web.url"/><hr/>失去焦点或按下回车键之后开始渲染<input type="text" v-model.lazy="web.url"/><hr/><!--如果在数字前加其他类型，将不会发生变化-->输入框的值转换为数字类型<input type="text" v-model.number="web.user"/><hr/><!--如果在数字前加其他类型，将不会发生变化-->删除首尾空白字符串<input type="text" v-model.trim="web.url"/>
</div>
<body><script type="module">import { createApp,reactive } from "./vue.esm-browser.js";createApp({setup() {const web = reactive({url: "www.baidu.com",user: 0});return {web};}}).mount("#app");</script>
</body>
</html>
运行结果：
7. 渲染数据v-text和v-html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>渲染数据v-text和v-html</title>
</head>
<body><div id="app"><h3> {{ web.title }} </h3><h3 v-text="web.title"></h3><h3 v-html="web.url"></h3></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js';createApp({setup(){const web = reactive({title: "This is a dmeo",url: "<i style='color:blue;'>www.baidu.com</i>"});return {web};}}).mount("#app");</script>
</body>
</html>
运行结果：
8. computed计算属性
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>computed计算属性</title>
</head><body><div id="app"><h3> add: {{ add() }} </h3><h3> add: {{ add() }} </h3><h3> sum: {{ sum }} </h3><h3> sum: {{ sum }} </h3><hr/>x: <input type="text" v-model.number="data.x"/><br/>y: <input type="text" v-model.number="data.y"/></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js';createApp({setup() {const data = reactive({x: 10,y: 20});let add = () => {console.log("add");return data.x + data.y;};const sum = computed(() => {console.log("sum");return data.x - data.y;});return {data,add,sum};}}).mount("#app");</script>
</body></html>
运行结果：
