| web前端开发之vue基础 | 您所在的位置：网站首页 › webvue › web前端开发之vue基础 |
web前端开发之vue基础
|
一、vue基础
1.1 啥是vue
引入vue.js 的cdn节点 创建一个 id为app的节点 如：创建vue实例 let app = new Vue({ el: '#app', data: { msg:'vue' } }) el 属性指定当前 vue 实例的挂载点 vue实例中的所有数据只能在此dom范围内使用 data 中是模型数据，这些数据依赖于当前的vue实例，可以在控制台中通过下面方式访问data中数据 2.1 数据绑定 2.1.1 内容绑定直接在标签内使用{{}} {{msg}} let app = new Vue({ el: '#app', data: { msg:'我是内容绑定' } })双{{}}只能显示纯文本 如需显示html内容 则需要使用v-html指令 let app = new Vue({ el: '#app', data: { msg:'我是内容绑定' } }) 2.1.2 属性绑定 所谓属性绑定就是把data中的数据作为某个元素的属性值我们需要使用v-bind:属性名 指令属性可以是内置的 也可以是自定义的 {{id}} let app = new Vue({ el: '#app', data: { id:11 } })v-bind: 可以简写为 {{id}} 2.1.3 表单控件的值 可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素 2.1.3.1 文本框和文本域 let app = new Vue({ el: '#app', data: { value:'我是文本框' } }) let app = new Vue({ el: '#app', data: { textarea:'我是文本域' } }) 2.1.3.2 复选框 对于复选框来说 v-model 绑定的是checked属性 游泳 阅读 游戏 let app = new Vue({ el: '#app', data: { isSwim:false, isRead:false, isPlay:true } })经过实验我们可以得出：当v-model的值为false的时候 复选框是不会选中的 2.1.3.3 单选框 男 女 let app = new Vue({ el: '#app', data: { gender:'' } }) 设置多个单选框的 v-model 为同样的值，就可以省略 name 属性选择某个单选框后，此单选框的 vlue 属性值会赋值给 gender 属性设置 gender 属性的值为某个单选框的 value 值，此单选框就会默认选中 2.1.3.4 下拉列表： 请选择 北京 石家庄 上海 let app = new Vue({ el: '#app', data: { city:'' } }) 3.1 列表渲染说到列表渲染就会用到v-for指令 {{item}} let app = new Vue({ el: '#app', data: { list: [ { id: 1, title: '我是标题1' }, { id: 2, title: '我是标题2' }, { id: 3, title: '我是标题3' } ] } })v-for的第一个参数可以随便起名 in 要循环渲染的data中的数据 在实际开发中，我们的数据则需要从服务端获取 所以我们用到了fetch方法 let app = new Vue({ el: '#app', data: { list: [], }, created: function () { // created 函数会再 vue 实例实例化时执行 fetch('地址') .then((res) => { return res.json() }) .then((res) => { this.list = res }) }, }) 3.2 条件渲染条件渲染的方式有很多种 可以直接使用v-if配套使用v-if和v-else 和 v-else-ifv-if在单独使用的时候，与 v-show 的作用是一样的，都是根据变量的值决定是显示还是隐藏当前元素 3.2.1 v - if 你猜猜我会不会被渲染 let app = new Vue({ el: '#app', data: { isDouble:false } })通过运行我们可以得出 浏览器并不会渲染 因为isDouble为false 且并不是设置了display为none 而是浏览器并没有这个标签 3.2.2 v- if 和 v - else 有对象 没对象结果不用想都知道 那肯定是没对象 isDouble的值为false 而使用了v-else之后 isDouble的值会取反 3.2.3 v- show 有对象 let app = new Vue({ el: '#app', data: { isDouble:false } }) 与v - if 不同的是 浏览器渲染了这个元素 但是设置了p标签的style样式为displa:none; 3.3 列表渲染总结： v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好 4.1 样式处理操作元素的 class 列表和内联样式是数据绑定的一个常见需求，因为它们都是 attribute。 所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。 不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组 4.1.1 vue操作class class 与 v-bind:class 可以共存，但是其实最终操作的都是元素的 class 属性v-bind:class 的值可以是字符串、对象或者数组v-bind:class 的值如果为对象，如{active:isActive,color:isColor}，则属性名称是 style 中定义的样式类名称，属性值是 data 中定义的变量名称 .active { color: red; } // 对象表示法 // v-bind:class="{类名:data中的属性值}" 如果为true 类名为active 反之为空 vue操作class属性 // 多属性并存 // 将 class 属性称作静态 class，将 v-bind:class 称作动态class 对象表示法 let app = new Vue({ el: '#app', data: { isactive:true, color: true }, }) 4.1.2 vue操作style注意： 不要忘记加花括号 不同属性值之间用逗号隔开 :style=“{属性名:data中的值}” vue操作style属性 let app = new Vue({ el: '#app', data: { color: 'red', fontSize: '16px' }, }) 5.1 事件处理 5.1.1 事件监听可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 // v-on 可以简写成@ 按钮 let app = new Vue({ el: '#app', data: { num: 0 }, methods: { add: function () { this.num += 1 } } })以上是一个简单的点击事件 我们为button按钮添加了单击事件之后 需要在methods自定义方法中去执行 同样 此方法也可以传值 5.1.2 计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。 例如： {{ message.split('').reverse().join('') }}在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。 所以，对于任何复杂逻辑，你都应当使用计算属性。 代码示例： {{reverse}} let app = new Vue({ el: '#app', data: { message:'hello' }, // computed 计算属性 computed:{ reverse:function(){ // 别忘了使用return返回数据哦 // 返回值后 html渲染的时候则需要用到定义的属性 reverse return this.message.split('').reverse().join('') } } }) 5.1.3 侦听器 {{btn}} let app = new Vue({ el: '#app', data: { message: '', btn: '侦听器' }, watch: { // 侦听谁绑定谁 // 侦听器有两个属性 原来的值 和新值 message: function (oldValue, newValue) { this.btn = newValue } } }) |
【本文地址】