个人网站建设方案书例文关键词歌曲歌词
本文主要介绍vue3中的一些基本操作。
目录
1. 动态属性绑定 v-bind
2. 遍历数组或对象 v-for
3. 双向数据绑定 v-model
4. v-model 修饰符
5. 渲染数据 v-text 和 v-html
1. 动态属性绑定 v-bind
主要使用在标签中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.textColor {color: blue;}</style>
</head>
<body><div id="app"><!-- 先设置了三个标签 --><h3>value="baidu.com"</h3><input type="text" value="baidu.com"><!-- 1.将value修改为 动态属性v-bind 绑定 后面的值也不能是固定的 需要是 web.url --><h3>v-bind:value="web.url"</h3><input type="text" v-bind:value="web.url"><!-- 2.简写模式:等效于v-bind: --><h3>:value="web.url"</h3><input type="text" :value="web.url"> <h3>src="windows.jpg"</h3><img src="windows.jpg"><!-- 3.将src修改为动态属性绑定 v-bind --><h3>src="windows.jpg"</h3><img :src="web.img"><h3>class="textColor"</h3><b class="textColor">zzz</b><!-- 4.动态绑定class属性,根据fontStatus的布尔值来决定是否渲染zzz --><!-- 这里的{}是用来判断这个className是否要使用，true为使用 false为不使用 --><!-- {}相当于数学中的括号，先算括号(即{})的值，再赋值给外部class --><h3>class="textColor"</h3><b :class="{textColor:web.fontStatus}">zzz</b></div><script type="module">// 这里注意还是type = "module"import {createApp,reactive} from './vue.esm-browser.js';createApp({setup(){const web = reactive({ // reactive创建响应式数据对象web// 三个属性url : "www.baidu.com",img : "windows.jpg",fontStatus : true // 文字状态})return {web}}}).mount("#app")</script>
</body>
</html>2. 遍历数组或对象 v-for
<body><div id="app"><!-- 1.创建ul和li标签，li用于循环 --><ul><!-- 2.为li添加v-for 来循环number数组里的内容 --><li v-for="value in data.number"><!-- 3.用插值表达式{{}}来显示遍历到的内容 -->{{ value }}</li></ul><!-- 4.显示数组的索引和内容 --><ul><li v-for="(value,index) in data.number"><!-- 5.键值对形式表示 并使用:来分隔开 -->index => {{ index }} : value => {{ value }}</li></ul><!-- 6.遍历user对象里的内容 --><ul><li v-for="(value,key) in data.user">key => {{ key }} : value => {{ value }}</li></ul><!-- 7.遍历user对象里的内容 包括index --><ul><li v-for="(value,key,index) in data.user">index => {{ index }} : key => {{ key }} : value => {{ value }}</li></ul><!-- 8.不用获取所有数据，获取满足条件的数据 --><ul><!-- 9.将li修改为template标签，它可以包装多个元素/多行代码 --><!-- vue会编译它的内容，但不会作为DOM元素在页面中渲染 --><template v-for="(value,key,index) in data.user"><!-- 10.将编译的内容复制到li内 --><!-- 11.在li内添加遍历条件 v-if --><li v-if = "index == 1">index => {{ index }} : key => {{ key }} : value => {{ value }}</li></template></ul> <!-- 12.遍历teacher,它是包含两个对象的数组 --><ul><li v-for="(value,index) in data.teacher"><!-- 13.遍历每个对象里的属性 -->index => {{ index }} : value.id => {{ value.id }} : value.name => {{ value.name }} : value.web => {{ value.web }} </li></ul> <!-- 14.动态属性的添加 --><ul><!-- :title 当鼠标放在页面的这个对象位置 就会有提醒 --><!-- :key 为每个li元素设置一个唯一的值，不一定是value.id 目的是提升性能 --><li v-for="(value,index) in data.teacher" :title="value.name" :key="value.id">index => {{ index }} : value.id => {{ value.id }} : value.name => {{ value.name }} : value.web => {{ value.web }} </li></ul> </div><script type="module">import {createApp,reactive} from './vue.esm-browser.js';createApp({setup(){const data = reactive({ // reactive创建响应式数据 datanumber: ['十','十一','十二'], // 数组user: {// 对象name: 'zzz',gender: '女'},teacher:[// 包含两个对象的数组{id:100,name:"zzz",web:"baidu.com"},{id:101,name:"bbb",web:"www.baidu.com"}]})return {data}}}).mount("#app")</script>
</body>3. 双向数据绑定 v-model
之前的动态属性绑定 v-bind:value="XXX" 是单向数据绑定
数据发生变化时，单向绑定的数据会自动更新，但是用户手动修改input值时，不会自动更新。
双向数据绑定实现的就是 用户手动修改input值时自动更新。
这是一种实时渲染的形式
下面的代码中列举6种表单中的情况
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- 插值表达式获取每个元素对应的值 --><h3>文本框 {{ data.text }}</h3><h3>单选框 {{ data.radio }}</h3><h3>复选框 {{ data.checkbox }}</h3><h3>记住密码 {{ data.remember }}</h3><h3>下拉框 {{ data.select }}</h3> <!-- 1.单向数据绑定 当数据发生改变时, 视图会自动更新. 但用户手动更改 input 的值, 数据不会自动更新 --><!-- 这里将data.text的值动态绑定到value属性上 -->单向数据绑定 <input type="text" :value="data.text"><hr><!-- 2.双向数据绑定 当数据发生改变时, 视图会自动更新. 当用户手动更改 input 的值, 数据也会自动更新对于 <input type="text">, v-model 绑定的是 input 元素的 value 属性打开页面后，在页面中修改文本框的值时，其他所有的data.text在页面中的值都会修改注意形式：v-model="XXX" 没有:value=""了-->双向数据绑定 <input type="text" v-model="data.text"><hr><!-- 3.单选框和上面文本框不一样的是 文本框只能有唯一的值所以它直接绑定在value上而对于 <input type="radio">, v-model 绑定的是 input 元素的选中状态，选择的值不是唯一的形式：v-model="XXX" value="Y"点击页面选项后 value值显示到页面的radio处--><input type="radio" v-model="data.radio" value="1">写作<input type="radio" v-model="data.radio" value="2">画画<hr><!-- 4.复选框可以选多个，所以用空数组初始对于 <input type="checkbox">, v-model 绑定的是 input 元素的选中状态形式：v-model="XXX" value="Y"点击页面中的选项后 将value值添加到空数组中--><input type="checkbox" v-model="data.checkbox" value="a">写作<input type="checkbox" v-model="data.checkbox" value="b">画画<input type="checkbox" v-model="data.checkbox" value="c">运动<hr><!-- 5.记住密码 单个复选框 比如在勾选是否同意注册会实使用这里初始 remember为false 默认未勾选形式：v-model="XXX"点击页面后 记住密码的状态 会在true和false之间切换--><input type="checkbox" v-model="data.remember">记住密码<hr><!-- 6.下拉框对于 <select>, v-model 绑定的是 select 元素的选中状态形式：select v-model="XXX"value=""value="Y"...--><select v-model="data.select"><option value="">请选择</option><option value="A">写作</option><option value="B">画画</option><option value="C">运动</option></select></div><script type="module">// 模块化开发为例 type="module"import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({ // 创建响应式数据data// 下面是五个常用表单元素text: "baidu.com", //文本框radio: "", //单选框 默认值是空的字符串checkbox: [], //复选框 默认值是空数组remember: false, //单个复选框-记住密码 登录时会用到 默认falseselect: "" //下拉框 默认值空字符串显示“请选择”})return {data}}}).mount("#app")</script>
</body>
</html>4. v-model 修饰符
上面实现的都是实时渲染，如果不想实时，想要在某些情况下再渲染可以使用他的修饰符
比如：在失去焦点或按下回车键之后渲染
这里只介绍常用的三种
<body><div id="app"><!-- 插值表达式显示每个属性对应的值 --><h3>url: {{ web.url }}</h3><h3>user: {{ web.user }}</h3>实时渲染 <input type="text" v-model="web.url"> <br><!-- 1.不实时渲染，在失去焦点或按下回车后渲染 形式：v-model.lazy="XXX"在页面修改后按下回车/失去焦点 上面的所以数据 包括实时渲染的数据都被修改-->在失去焦点或按下回车键之后渲染 <input type="text" v-model.lazy="web.url"> <br><!-- 2.将输入文本框的值转为数字类型输入 100人, web.user 的值仍为 1003.需要注意：但是在数字前输入文本时 仍然无法修改为数字型只有在尾部添加时才会被修饰-->输入框的值转换为数字类型 <input type="text" v-model.number="web.user"> <br><!-- 4.尾部的修饰符去除首尾空格在页面中输入时如果前后有空格 在失去焦点/按下回车 后空格被删除在中间的空格不能去除-->去除首尾空格 <input type="text" v-model.trim="web.url"></div><script type="module">// 模块化开发为例import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({ //创建响应式数据weburl: "baidu.com",user: 10})return {web}}}).mount("#app")</script>
</body>5. 渲染数据 v-text 和 v-html
<body><div id="app"><!-- 插值表达式获取title值 --><h3>{{ web.title }}</h3><!-- 1.v-text 将数据解析为纯文本格式表达效果和插值表达式一样--><h3 v-text="web.title"></h3><!-- 2.v-html 将数据解析为 html 格式 这里的url是html格式 所以以此为例正确解析了html和执行了CSS样式--><h3 v-html="web.url"></h3><!-- 3.如果用v-text渲染url 无法解析html 只是输出为文本格式--><h3 v-text="web.url"></h3></div><script type="module">// 模块化开发import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({ // 创建响应式数据webtitle: "zzz",url:"<i style='color:blue;'>www.baidu.com</i>"})return {web}}}).mount("#app")</script>
</body>本文主要介绍vue3中的一些基本操作。