一、vue基础

1.1 啥是vue

在这里插入图片描述

1.1.1 创建vue

  1. 引入vue.js 的cdn节点

    1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  2. 创建一个 id为app的节点

    1. 如：<div id="app"></div>

  3. 创建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 属性绑定
  1. 所谓属性绑定就是把data中的数据作为某个元素的属性值
  2. 我们需要使用v-bind:属性名 指令
  3. 属性可以是内置的 也可以是自定义的
<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.net/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.net/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.net/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.net/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.net/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>
# 前端 # vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue