Vue 基础

Vue 是什么

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

以上是官网介绍，Vue 其实就一款前端 js框架，类似 jQuery，但是注意 jQuery 不要和 Vue 同时引入

  • 引入 Vue
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

JavaScript 中的 const var let 区别 >>> es5时候只有var定义变量，es6新增 let和 const ，存在块级作用域

  • const const定义的变量不可以修改,而且必须初始化。 常常定义常量 也是块级作用域
  • var var定义的变量可以修改，如果不初始化会输出undefined 警告，不会报错。 全局作用域
  • let let是块级作用域，函数内部使用let定义后，对函数外部无影响。 块级作用域

入门示例

<body>
    <div id="app">
        <span>{{msg}}</span><br>
        <input type="text" :placeholder="name">绑定属性<br>
        <input type="text" :placeholder="pwd"><br>
        <span v-text="user.name"></span>取出对象中的值<br>
        <span>{{user.pwd}}</span>提供双大括号取值<br>
        <p>{{lists}}</p>数组定义用中括号[ ]
        <p v-text="lists[0]"></p>通过角标来获取数组中的某个值
        <p v-text="msg.toUpperCase()"></p>取值时可以用Vue中的方法，这里是转换为大写
    </div>
</body>
<script src="/js/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",  //element 用来给 Vue 实例定义一个作用范围
        data:{
            msg:"vue字符串",
            name:"张三",
            pwd:"123",
            user:{name:"李四",pwd:"456"},
            lists:["湖南","广东","江苏"],
        },
    });
</script>

Vue 实例（对象）中的 el="#app" 属性：代表 Vue 的作用范围，在该范围类都可以使用Vue的语法，该范围之外，Vue语法无效

Vue 实例（对象）中的 data 属性：用来给 Vue 实例绑定一些相关数据，这些数据是自定义的

Vue 的基础语法

v-text 和 v-html

  • v-text 用来获取 data 中的数据，将数据以文本的形式渲染到指定标签内部
{{}}(插值表达式) 和 v-text 获取数据的区别在于
1. 使用 v-text 取值会将标签中原有的数据覆盖，使用插值表达式的形式不会覆盖标签中原有的数据
2. 使用 v-text 可以避免在网络环境较差的情况出现插值闪烁
  • v-html 用来获取 data 中的数据，将数据中含有的 html 标签先解析再渲染到指定标签内部

条件与遍历循环

  • v-if

v-if 作用：用来控制标签元素是否展示，底层通过对 dom 树节点进行添加和删除来控制是否显示

<div id="app-2">
  <p v-if="seen">sess 的值为true，这里就会显示</p>
</div>

var app = new Vue({
  el: '#app-2',
  data: {
    seen: true
  }
})
  • v-show

v-show 的作用：用来控制页面中标签元素是否展示，底层通过控制元素的 display 属性来控制标签是否显示

<span v-show="true">如果表达式的值为 true ，这里就会显示</span>
  • v-for

v-for 作用就是用来对 对象进行遍历的(在 JavaScript 中，数组也是对象的一种)

 <ol>
     lists 表示一个数组
    <li v-for="list in lists">
        {{list}}
    </li>
</ol>

var app = new Vue({
  el: '#app',
  data: {
    lists: ["湖南","广东","江苏"]
  }
})

绑定

标签属性绑定 v-bind

v-bind 作用：用来给HTML页面中标签元素的属性 绑定给 vue的实例

 <a v-bind:href="vuesrc">Vue 官网</a>
简化写法
 <a :href="vuesrc">Vue 官网</a>

v-bind:xxx 的简化写法 ===>> :xxx

var app = new Vue({
  el: '#app',
  data: {
    vuesrc: "https://cn.vuejs.org/",
  }
})

事件绑定 v-on

事件的三要素
	1. 事件源：发生事件dom元素 
    2. 事件:发生特定的动作 click单机、双击...
    3. 监听器：发生特定动作之后的事件处理程序，通常是js中函数
1. 在vue中绑定事件是通过 `v-on` 指令来完成的 `v-on:事件名` 如 `v-on:click`
2. 在`v-on:事件名`的赋值语句中是当前时间触发调用的函数名，它的简化写法我： @click="method"
3. 在vue中事件的函数统一定义在Vue实例的 `methods`属性中
4. 在vue定义的事件中`this`指的就是当前的`Vue实例(data)`,日后可以在事件中通过使用`this`获取Vue实例中相关数据


<button v-on:click="test('张三',23,'男')">点击弹窗</button>
可以通过 事件名(param1,param2,param3....) 的方式传递参数 给事件监听器方法
简化写法如下
<button @click="test('张三',23,'男')">点击弹窗</button>

v-on:xxx 的简化写法 ===>> @xxx

const app = new Vue({
    el:"#app",  //element 用来给 Vue 实例定义一个作用范围
    data:{
        message:"简单的消息"
    },
    methods:{
        test(name,age,sex){
            alert("点击弹出>"+name+">"+age+">"+sex);
            //通过 this 获取 data 中的数据
            console.log(this.message);
        }
    }
});

表单数据双向绑定 v-model

v-model 作用：用来绑定标签元素的值 与 vue实例对象中data的数据保持一致，从而失效双向的数据绑定机制

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定

#文本：
<input v-model="message" placeholder="表单文本">
<p>Message is: {{ message }}</p>

# 多行文本
<textarea v-model="message" placeholder="多行文本"></textarea>
<p style="white-space: pre-line;">{{ message }}</p>

#复选框
<input type="checkbox" value="张三" v-model="checkedNames">
<label for="张三">张三</label>
<input type="checkbox" value="李四" v-model="checkedNames">
<label for="李四">李四</label>
<input type="checkbox" value="王五" v-model="checkedNames">
<label for="王五">王五</label>
<br>
<span>多人运动: {{ checkedNames }}</span>
---------

image-20200807151941430

var app = new Vue({
  el: '#app',
  data: {
    message: "",//v-model 绑定的 message 初始设置为空字符串
  	checkedNames: [],
  }
})
  • 总结
# 总结
	1. 使用 `v-mode` 指令可以实现数据的双向绑定
	2. 所谓双向绑定，表单中数据变化会导致 vue实例data数据变化， vue实例中data数据的变化 同样会导致表单中的数据变化；称之为双向绑定。
	
# MVVM架构	双向绑定机制
	Model	数据			Vue实例中绑定数据
	VM		ViewModel	  监听器	===》 监听器会实时的监听 vue实例中data数据 和 页面展示的数据，从而实现双向绑定
	View	页面			页面展示的数据

事件修饰符

  • .stop
    • 阻止单击事件继续传播,
<!-- 当这种情况，input 位于 div 下，且两者都有一个点击事件， 当点击 button 按钮的同时会触发 div 的 click事件，这这种情况又叫事件传播/事件冒泡, 通过 .stop 修饰符可以阻止事件的传播行为-->
<div @click.stop="divClick">
    <input type="button" @click.stop="bClick" value="单击"/>
</div>

  • .prevent

    • 用来阻止标签的默认行为
    <a href="https://cn.vuejs.org/" @click.prevent="aClick">点击不会跳转页面，而是会触发 aClick 的单击事件</a>

  • .self

    • 可以避免其他事件行为的影响，比如 事件传播：self 只关心自己标签上触发的事件行为
    <!-- 只会触发标签自身的事件 -->
<div @click.self="divClick">
    <!-- 当点击 按钮1 或 按钮2 时，事件的传播行为不会影响到 div的事件 -->
    <input type="button" vlaue="按钮1" @click="btnClick1"/>
    <input type="button" vlaue="按钮2" @click="btnClick2"/>
    .stop 是用于阻止自身事件的传播行为，.self 可以避免 事件传播行为的影响
</div>

  • .once

    • 让指定的事件值触发一次
    <!-- aClick 事件只会被触发一次 -->
<a href="#" @click.once="aClick">链接</a>

<!-- 混合使用事件修饰符, 以下标签 第一次点击不会跳转页面，且只会触发一次 aClick 的事件 -->
<a href="https://cn.vuejs.org/" @click.once.prevent="aClick"> 链接 </a>
# 第二点击才会跳转页面

  • .passive

  • .capture

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

# 按键码的别名
    .enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right
# 使用方式 v-on:keyup.按键码别名 = "要调用的处理方法xxxMethod"

<input type="text" v-model="msg" @keyup.enter="keyEnter">
 posted on 2020-08-13 18:31  鬾鬽鬿魀魁䰡  阅读(135)  评论(0)    收藏  举报