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