Vue基础知识总结

一. 管网

1. https://cn.vuejs.org/

二.简介

1.渐进式框架,没有强主张,你可以在原有大系统的上面,把一两个组件用它实现,当jQuery用,也可以整个用它全家桶开发,还可以用它的视图

2.是一个构建用户界面的框架

3.是一个轻量级的MVVM(Model-View-ViewModel),其实就是所谓的双向数据绑定,数据驱动和组件化的前端开发,通过简单的API就能实现响应式的数据绑定和组合的视图组件

好处:不用直接操作DOM就能改变里面的数据

三.使用

第一步  先引入  vue.js
第二步  创建一个 Vue 实例
var vm = new Vue({
	
})
第三步  实例化 vue 对象
    <div id="box">
        {{name}}
    </div>
    <script src="./vue.min.js"></script>
    <script>
        var Vue = new Vue({
            el:"#box",    // 渲染开始的地方,挂载
            data:{
                name:"张三"   // 变量
            }
        })
    </script>

四.基础

1.模板语法

1-1.插值

直接使用{{ }} 将数据解释为普通文本,而非html代码

 如果刷新或文档过长出现{{ }}问题
 解决1   可以使用 v-text
 解决2   使用 v-cloak 指令
 <div v-cloak>{{msg}}</div>
 <style>
     [v-cloak]{
         display: none;
     }
</style>

1-2.v-html

会将元素当成HTML标签解析后输出
标签中使用 v-html=“状态名”,小心防止XSS.csrf攻击

 <p v-html = 'hello'></p>
 new Vue({
      el:'#app',
      data:{
          hello:'<span>hello world</span>'
      }
 })
结果:
<p>
	<span>hello world</span>    // 标签可以解析
</p>

1-3.v-text

会将元素当成纯文本输出

<p v-text = 'hello'></p>
new Vue({
     el:'#app',
     data:{
         hello:'<span>hello world</span>'
     }
 })

1-4.v-bind

绑定一个属性 v-bind:src=‘im’ 简写 :src=“im”

2.指令

指令是带有v-前缀的特殊属性attribute,一些指令能够接收一个参数,在指令名称之后以冒号表示

2-1 v-once

执行一次性地插值,当数据改变时,插值处的内容不会更新

<span v-once>这个将不会改变:{{ msg }</span>

2-2 v-on

v-on 指令,用于监听DOM事件

<a v-on:click="btn"></a>
事件监听简写  <a @click="btn"></a>
如果要访问原始的DOM事件,可以用特殊变量 $event 把它传入到方法
<button v-on:click="btn('yet',$event)">
	提交
</button>

2-3 表单控件绑定/双向数据绑定

v-model 双向数据绑定
表单修饰符:1.lazy 失去焦点同步一次 2.number 格式化数字 3.trim 去除首尾空格

2-4 v-if 和 v-show 条件指令

v-if 控制切换一个元素是否显示(动态的创建和删除一个节点)
v-else 要紧跟在带有 v-if 或者 v-else-if 的元素之后

<div v-if="login">
    <label>Username</label>
    <input placeholder="Enter your username">
</div>
<div v-else>
    <label>Email</label>
    <input placeholder="Enter your email address">
</div>
<button @click="login=!login">toggle</button>

通过切换login来进行显示和隐藏

v-show 是另一个控制元素显示和隐藏,v-show是通过给元素设置样式display属性，控制元素的显示和隐藏，如果v-show的值是true，则设置display:true,否则设置display:false。其用法和v-if相似。注意：v-show不支持元素，也不支持 v-else
注意点:一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

2-5 v-for 列表渲染

<li v-for="(item,index) in items" :key="item"></li>
item 是值   index 是下标
v-for 里面使用值范围
可以接受整数,数组,对象

为什么要加 key :因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

2-6 v-pre

{{变量}} 里面的内容不解析

3 事件处理

3-1 事件修饰符

1.阻止单击事件继续传播    .stop
<a v-on:click.stop="doThis"></a>
2.提交事件不再重新加载页面   .prevent
<form v-on:submit.prevent="onSubmit"></form>
3.修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
4.事件捕获   .capture
<div v-on:click.capture="doThis"></div>
5.只有当点击自己时才能触发   .self
<div v-on:click.self="doThat"></div>
6.点击事件只能触发一次     .once
<a v-on:click.once="doThis"></a>

3-2 按键修饰符

• .number 转换为数值
  • 注意点：
  • 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
  • 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。
• .trim 自动过滤用户输入的首尾空白字符
  • 只能去掉首尾的 不能去除中间的空格
• .lazy 将input事件切换成change事件
  • .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
• 在失去焦点 或者 按下回车键时才更新

<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">

<!--自动过滤用户输入的首尾空白字符   -->
<input v-model.trim="msg">

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：enter、tab、delete(捕获 “删除”和 “退格”键)、esc、space、up、down、left、right

4.class 和 style 属性

.classs属性绑定： 多个class 要用数组[]包起来 ：class=’[class1,class2]’,还可以加上对象 ：class=’[{class1:true},class2]’，并且不会对已有的class产生影响

<div id="test3">
    <p :class='[class1,class2]' class='a'>vue测试</p>
    <!-- 解析完成后，上面p元素的class为 class='a red width' -->
</div>

在vue中通过绑定来写行内style要用 对象

 <div id="test">
    <img src="a.jpg" alt="" :style="{width:imgWidth,border:'10px solid #f00'}">
 </div>
<script>
     const vm = new Vue({
         el:'#test',
         data: {
             imgWidth: '200px',
         }
     })
</script>