web前端开发之vue基础

一、vue基础

1.1 啥是vue

在这里插入图片描述

1.1.1 创建vue

引入vue.js 的cdn节点
1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
创建一个 id为app的节点
1. 如：<div id="app"></div>
创建vue实例
1. <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 较好