常用标签讲解
1.模块化开发 导入 createApp, reactive
<div id="app"> {{ msg }} <h2>{{ web.title }}</h2> <h3>{{ web.url }}</h3> </div><script type="module"> import { createApp, reactive } from './vue.esm-browser.js' createApp({ setup() { const web = reactive({ title: "邓瑞编程", url: "dengruicode.com" }) return { msg:"success", web } } }).mount("#app") </script>
2.点击事件
v-on 简写@click
<!-- v-on:click 表示在 button 元素上监听 click 事件 --> <button v-on:click="edit">修改</button> <br> <!-- @click 简写形式 --> <button @click="add(20, 30)">加法</button> <br>
3.显示和隐藏 v-show
<p v-show="web.show">邓瑞编程 dengruicode.com</p> <script type="module"> import { createApp, reactive } from './vue.esm-browser.js' createApp({ setup() { const web = reactive({ show: true }) const toggle = () => { web.show = !web.show } return { web, toggle } } }).mount("#app") </script>
4.条件渲染 v-if
<p v-if="web.user < 1000">新网站</p> <p v-else-if="web.user >= 1000 && web.user < 10000">优秀网站</p> <p v-else-if="web.user >= 10000 && web.user < 100000">资深网站</p> <p v-else>超级网站</p>
5.动态属性绑定 v-bind 简写:
<h3>v-bind:value="web.url"</h3> <input type="text" v-bind:value="web.url"> <h3>简写 :value="web.url"</h3> <input type="text" :value="web.url">
6.遍历数组或对象 v-for
<ul> <!-- <template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染 --> <template v-for="(value, key, index) in data.user"> <li v-if="index == 1"> index=> {{ index }} : key=> {{ key }} : value=> {{ value }} </li> </template> </ul>
<ul> <li v-for="(value, key) in data.user"> key=> {{ key }} : value=> {{ value }} </li> </ul>
7.双向数据绑定 v-model
<input type="text" v-model="data.text"> <input type="radio" v-model="data.radio" value="1">写作 <input type="radio" v-model="data.radio" value="2">画画
8.v-model修饰符
<div id="app"> <h3>url: {{ web.url }}</h3> <h3>user: {{ web.user }}</h3> 实时渲染 <input type="text" v-model="web.url"> <br> 在失去焦点或按下回车键之后渲染 <input type="text" v-model.lazy="web.url"> <br> <!-- 输入 100人, web.user 的值仍为 100 --> 输入框的值转换为数字类型 <input type="text" v-model.number="web.user"> <br> 去除首尾空格 <input type="text" v-model.trim="web.url"> </div>
9.渲染数据 v-text 和 v-html
<div id="app"> <h3>{{ web.title }}</h3> <!-- v-text 将数据解析为纯文本格式 --> <h3 v-text="web.title"></h3> <!-- v-html 将数据解析为 html 格式 --> <h3 v-html="web.url"></h3> </div>
10.计算属性 computed
<h3>sum: {{ sum }}</h3> <h3>sum: {{ sum }}</h3> x <input type="text" v-model.number="data.x"> <br> y <input type="text" v-model.number="data.y"> //计算属性-有缓存 [计算属性根据其依赖的响应式数据变化而重新计算] const sum = computed(() => { console.log("sum") //打印一次 return data.x + data.y })
标签:web,Vue,createApp,入门,url,sum,value,reactive,快速 From: https://www.cnblogs.com/zhaoyingjie/p/18223310