文章目录

一、Vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

二、知识点

1.基础结构

首先要在html文件中引入vue.js文件。Vue对象的属性是用什么写什么。

<script>
        new Vue({
            el: "id选择器名",
            // 定义状态
            data: {
                
            },
            //定义计算属性
            computed:{
            
            },
            //定义侦听器
            watch: {
            
            }
           // 定义方法
            methods: {
               
            }
        })
</script>

2.插值语法{{}}

{{}}可以获取数据状态值，也可以写一些简单的表达式，如果对象里数据状态值改变，那么插值处的内容都会更新。

<div id="box">
        {{myname}}
        {{10+20}} 
</div>
<script>
	new Vue({
		el: "#box",
		data: {
			myname: 'wpf',
		}
	})
</script>

{{}}双大括号会将数据解释为普通文本，而非 HTML 代码。如下代码所示，最终会在浏览器上输出：<p>1111</p><p>222</p>

<div id="box">
        {{myname}}
</div>
<script>
	new Vue({
		el: "#box",
		data: {
			myname: '<p>1111</p><p>222</p>',
		}
	})
</script>

3.指令

指令是带有 v- 前缀的特殊属性，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-html

可将html字符串解析成标签

v-html 可防止XSS,csrf（
(1) 前端过滤
(2) 后台转义(< > &lt; &gt;)
(3) 给cookie 加上属性http
）

<div id="box">
    <!-- 默认不渲染HTML标签 -->
    {{myText}}
    
    <!-- 渲染 -->
    <div v-html="myText"></div>
</div>
<script>
    new Vue({
        el: "#box",
        data: {
            dataList: [],
            myText: "<b>加粗</b>"
        }
    })
</script>

v-once

指令是只执行一次，例如下面span添加v-once属性后，当myname值改变后，span内的内容不会自动更新，如果span没有v-once指令，则myname值改变span里的内容就会同步更新。

<div id="box">
    <span v-once>{{myname}}</span>
</div>
<script>
	new Vue({
		el: "#box",
		data: {
			myname: 'wpf',
		}
	})
</script>

v-bind

v-bind 指令可以用于响应式地更新html标签属性值。如下a标签的跳转地址可根据myurl的值改变而改变，它的缩写为 :

<div id="box">
    <a v-bind:href="myurl"></a>
    <!-- 等价写法 -->
    <a :href="myurl"></a>
</div>
<script>
	new Vue({
		el: "#box",
		data: {
			myurl:""
		}
	})
</script>

v-bind功能很强大，当用它来绑定class是有多种写法
1、对象语法

<!-- 对象里可以包含多个属性（就是多个“类名:状态名”组合），当这些状态名值为真，对应的类名就会被渲染到div上 -->

<!-- 写法一 -->
<div 
	class="static" 
	v-bind:class="{ 类名:状态名 }">
</div>


<!-- 写法二 -->
<div v-bind:class="classObject"></div>
<script>
	new Vue({
		data: {
			classObject: {
				类名:状态名
			}
		}
	})
</script>

2、数组语法

<!-- 数组里可以包含多个状态名，数组里状态名对应的类名就会被渲染到div上，数组里也可以写对象 -->
<div v-bind:class="[状态名]"></div>
<script>
	new Vue({
		data: {
			classObject: {
				状态名:"类名"
			}
		}
	})
</script>

3、三元表达式

<div v-bind:class="[isTrue ? Class1 : '', Class2]"></div>

v-if 、v-else-if、v-else

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

可以把一个 <template>元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template>元素，达到多个元素切换的效果。

<div id="box">
    <!-- isCreate为真显示111，否则像是333-->
    <div v-if="isCreate">111</div>
    <div v-else>333</div>
</div>
<script>
    new Vue({
        el: "#box",
        data: {
            isCreate: true
        }
    })
</script>

v-show

指令是控制元素显示或隐藏的，当v-show=true元素显示，它只是简单地切换元素的 CSS property display。。

<div id="box">
    <div v-show="isTrue">111</div>
</div>
<script>
    new Vue({
        el: "#box",
        data: {
            isTrue: true
        }
    })
</script>

v-if与v-show的区别：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-on

v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。。如下给button绑定一个点击事件，三种写法是等价的，缩写为 @

<div id="box">
    <button v-on:click="handleClick">click</button>
    <button @click="handleClick">click</button>
    <button @click="handleClick()">click</button>

	<!--可以直接将简单的逻辑现在DOM中-->
 	<button v-on:click="count+=1">sum</button>
</div>
<script>
    new Vue({
        el: "#box",
        data: {
            count: 0
        },
        methods: {
            handleClick(){
                console.log("点击")
            }
        }
    })
</script>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button id="box" v-on:click="test($event)">
  test
</button>
<script>
    new Vue({
        el: "#box",
        methods: {
            test(event) {
    			// 访问原生事件对象
    			if (event) {
      				event.preventDefault()
    			}
    			alert("调用了test函数")
  			}
        }
    })
</script>

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 2.1.4 新增-->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 2.3.0 新增-->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

按键修饰符

<!-- 功能：当按回车键后才调用handleKeyUp  -->
<input type="text" @keyup.enter="handleKeyUp">

<!-- 支持链式操作，相当于组合键 -->
<input type="text" @keyup.enter.ctrl="handleKeyUp">
<!-- .esc .up .down .left .right .space .ctrl .shift .delete -->

<!-- 支持键值码修饰符 -->
<!-- 例：将事件绑定到按键a上 -->
<input type="text" @keyup.65="handleKeyUp">

exact修饰符
允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标按钮修饰符

2.2.0 新增
.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。

v-for

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的。支持第二个参数，当遍历对象是数组时第二个参数为item在数组中的索引值，当遍历对象为对象时第二个参数为键名。

遍历的时候有两种写法：
v-for="item in items"
v-for="item of items"
key：跟踪每个节点的身份，从而重用和重新排序现有元素,理想的 key 值是每项都有的且唯一的 id。

<div id="box">
    <ul>
        <li v-for="item in items" :key="item.message">
            {{ item.message }}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            items: ["a","b"]
        }
    })
</script>

也可以用 v-for 来遍历一个对象的 property，效果是一样的。

<div id="box">
    <ul>
        <li v-for="item in obj" :key="item.message">
            {{ item }}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            obj: {
      			title: 'How to do lists in Vue',
      			author: 'Jane Doe',
      			publishedAt: '2016-04-10'
    		}
        }
    })
</script>

当 v-for 和 v-if处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if将分别重复运行于每个 v-for 循环中。

v-model

你可以用 v-model指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
怎样理解双向绑定呢，就是当表单输入框输入内容改变会通过v-model绑定的状态值，而改变状态值也可以改变输入框内的内容

<div id="box">
    <input v-model="message">
</div>
<script>
    new Vue({
        el: "#box",
        data: {
            message: "<b>加粗</b>"
        }
    })
</script>

复选框的v-model的使用

<!--绑定bool值改变单个多选框的选中状态-->
<input type="checkbox" id="checkbox" v-model="checked">

<!--绑定数组获取多个多选框的选中状态，哪个多选框被选中，对应的value值就会出现在checkedName数组中-->
<div id="box">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
	<label for="jack">Jack</label>
	<input type="checkbox" id="john" value="John" v-model="checkedNames">
	<label for="john">John</label>
	<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
	<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<script>
    new Vue({
        el: "#box",
        data: {
    		checkedNames: []
  		}
    })
</script>

单选框的v-model的使用
input 必须加不同 value 属性，哪一个单选框被选中，相应的 value 值就会赋值给 picked

<div id="example-4">
  <input type="radio"  value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio"  value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
<script>
    new Vue({
  		el: '#example-4',
  		data: {
    		picked: ''
  		}
	})
</script>

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：


text 和 textarea 元素使用 value property 和 input 事件；


checkbox 和 radio 使用checked property 和 change 事件；


select 字段将 value 作为 prop 并将 change 作为事件。

表单修饰符

<!-- 让双向绑定myText同步更新没那么快 -->
<input type="text" v-model.lazy="myText">{{myText}}

<!-- 让input提交的数据变为数字 -->
<input type="number" v-model.number="myAge">

<!-- 去除首尾空格，原理调用trim（）方法 -->
<input type="text" v-model.trim="myUsername">

Tip

兄弟们，加油！！！

# vue.js # javascript # 前端
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

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue