快速入门Vue2

Vue 简介

官网

  1. 英文官网: https://vuejs.org/
  2. 中文官网: https://cn.vuejs.org/

Vue 的特点

  1. 遵循 MVVM 模式
  2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
  3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

与其它 JS 框架的关联 

  1. 借鉴 Angular 的模板数据绑定技术
  2. 借鉴 React 的组件化虚拟 DOM 技术

Vue 周边库

  1. vue-cli: vue 脚手架
  2. vue-resource
  3. axios
  4. vue-router: 路由
  5. vuex: 状态管理
  6. element-ui: 基于 vue 的 UI 组件库(PC 端)

初识 Vue

模板语法 

效果

模板的理解

html 中包含了一些 JS 语法代码,语法分为两种,分别为:
  1. 插值语法(双大括号表达式)
  2. 指令(以 v-开头)

插值语法

  1. 功能: 用于解析标签体内容
  2. 语法: {{xxx}} ,xxxx 会作为 js 表达式解析

指令语法 

  1. 功能: 解析标签属性、解析标签体内容、绑定事件
  2. 举例:v-bind:href = 'xxxx' ,xxxx 会作为 js 表达式被解析
  3. 说明:Vue 中有有很多的指令,此处只是用 v-bind 举个例子

数据绑定 

效果

单向数据绑定 

  1. 语法:v-bind:href ="xxx" 或简写为 :href
  2. 特点:数据只能从 data 流向页面

双向数据绑定 

  1. 语法:v-mode:value="xxx" 或简写为 v-model="xxx"
  2. 特点:数据不仅能从 data 流向页面,还能从页面流向 data

MVVM 模型 

  1. M:模型(Model) :对应 data 中的数据
  2. V:视图(View) :模板
  3. VM:视图模型(ViewModel) : Vue 实例对象

 

事件处理 

效果 

绑定监听 

  1. v-on:xxx="fun"
  2. @xxx="fun"
  3. @xxx="fun(参数)"
  4. 默认事件形参: event
  5. 隐含属性对象: $event

事件修饰符

  1. .prevent : 阻止事件的默认行为 event.preventDefault()
  2. .stop : 停止事件冒泡 event.stopPropagation()
  3. once: 事件只触发一次
  4. capture: 使用事件的捕获模式
  5. self: 只有event.target是当前操作的元素是触发事件
  6. passive: 事件的默认行为立即执行,无需等待事件回调执行完毕

按键修饰符

  1. keycode : 操作的是某个 keycode 值的键
  2. keyName : 操作的某个按键名的键(少部分)

计算属性与监视 

效果 

计算属性-computed 

  1. 要显示的数据不存在,要通过计算得来。
  2. 在 computed 对象中定义计算属性。
  3. 在页面中使用{{方法名}}来显示计算的结果。

监视属性-watch 

 

  1. 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
  2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算

class 与 style 绑定

理解

  1. 在应用界面中, 某个(些)元素的样式是变化的
  2. class/style 绑定就是专门用来实现动态样式效果的技术

class 绑定 

  1. :class='xxx'
  2. 表达式是字符串: 'classA'
  3. 表达式是对象: {classA:isA, classB: isB}
  4. 表达式是数组: ['classA', 'classB']

style 绑定

  1. :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  2. 其中 activeColor/fontSize 是 data 属性

条件渲染

条件渲染指令

  1. v-if 与 v-else
  2. v-show

比较 v-if 与 v-show 

  1. 如果需要频繁切换 v-show 较好
  2. 当条件不成立时, v-if 的所有子节点不会解析(项目中使用)

列表渲染 

效果

列表显示指令 

  • 遍历数组: v-for / index
  • 遍历对象: v-for / key

收集表单数据 

<body>
    <div id="root">
        <form @submit="demo">
            账号:<input type="text" v-model="account" > <br><br>
            密码:<input type="password" v-model="password" > <br><br>
            性别:
            男<input type="radio" name="sex" v-model="sex" value="male">
            女<input type="radio" name="sex" v-model="sex" value="female"><br><br>
            爱好:
            学习<input type="checkbox" v-model="hobby" value="study">
            打游戏<input type="checkbox" v-model="hobby" value="game">
            吃饭<input type="checkbox" v-model="hobby" value="eat">
            <br><br>
            所属校区
            <select v-model="city">
                <option value="">请选择校区</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz">深圳</option>
            </select>
            <br><br>
            <textarea v-model="other"></textarea><br><br>
            <input type="checkbox" v-model="agree">
            <button>提交</button>
        </form>
    </div>
    
</body>
</html>
<script>
    const x=new Vue({
        el:'#root',
        data:{
           account:'',
           password:'',
           sex:'female',
           hobby:[],
           city:'beijing',
           other:'',
           agree:''
        },
        methods:{
            demo(){
                console.log("www")
            }
        }
       
    })
</script>

效果

过滤器 

理解过滤器 

  1. 功能: 对要显示的数据进行特定格式化后再显示
  2. 注意: 并没有改变原本的数据, 是产生新的对应的数据

内置指令与自定义指令 

常用内置指令

  1. v-text : 更新元素的 textContent
  2. v-html : 更新元素的 innerHTML
  3. v-if : 如果为 true, 当前标签才会输出到页面
  4. v-else: 如果为 false, 当前标签才会输出到页面
  5. v-show : 通过控制 display 样式来控制显示/隐藏
  6. v-for : 遍历数组/对象
  7. v-on : 绑定事件监听, 一般简写为@
  8. v-bind : 绑定解析表达式, 可以省略 v-bind
  9. v-model : 双向数据绑定
  10. v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

自定义指令

注册全局指令

Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})

注册局部指令

directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}

1) 使用指令
v-my-directive='xxx

Vue 实例生命周期

生命周期流程图

vue 生命周期分析 

1) 初始化显示
* beforeCreate()
* created()
* beforeMount()
* mounted()
2) 更新状态: this.xxx = value
* beforeUpdate()
* updated()
3) 销毁 vue 实例: vm.$destory()
* beforeDestory()
* destoryed()

常用的生命周期方法

  1. mounted(): 发送 ajax 请求, 启动定时器等异步任务
  2. beforeDestory(): 做收尾工作, 如: 清除定时器
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值