一、vue基础
1.1 啥是vue
1.1.1 创建vue
-
引入vue.js 的cdn节点
<script src="https://cdn.jsdelivr.net/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较好