vue基础


vue概述

渐进式JavaScript框架

声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建

vue基本使用

vue模板语法

前端渲染方式

  • 原生JS拼接字符串
  • 使用前端模板引擎
  • 使用vue模板语法

指令

指令的本质就是自定义属性,以v-开头

  • 数据绑定指令
    • v-text 填充纯文本,相比于插值表达式更加简洁
    • v-html 填充html片段,存在安全问题
    • v-pre 填充原始信息
  • 数据响应式
    • 如何理解响应式?在H5中为屏幕尺寸变化导致样式的变化,数据的响应式为数据变化导致页面内容的变化
    • 数据绑定,将数据填充到标签中
    • v-once,只编译一次,显示内容后不再具有响应式功能

双向数据绑定 v-model

<input v-model="test">

<input :value="test" @input="test = $event.target.value">

事件绑定

v-on 指令用法 <input v-on:click='xxx' />

v-on 简写形式 <input @click='xxx' />

直接绑定函数名称 <button v-on:click='say'>hello</button>

调用函数 <button v-on:click='say()'>hello</button>

普通参数和事件对象 <button v-on:click='say('hi',$event)'>hello</button>

如果事件直接绑定函数名称,那么默认会传递事件对象作为函数的第一个参数;如果事件绑定函数调用,那么事件对象必须作为最后一个参数显式传递。

修饰符

  • 事件修饰符
    • .stop 阻止冒泡
    • .prevent 阻止默认行为
    • .capture
    • .self
    • .once
    • .passive
  • 按键修饰符
    • .enter
    • .tab
    • .delete (捕获“删除”和“退格”键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
  • 自定义按键修饰符

属性绑定

vue动态处理属性:v-bind <a v-bind:href='url'>跳转</a> ; 缩写形式 <a :href='url'>跳转</a>

Class样式绑定

  • 对象语法 <div v-bind:class="{active:is Active}"></div>
  • 数组语法 <div v-bind:class="[activeClass,errorClass]"></div>

对象绑定和数组绑定可以结合使用;class绑定的值可以简化操作,可以用对象来存储多个类;默认的class会被保留。

Style样式处理

  • 对象语法 <div v-bind:style="{color: activeColor}"></div>
  • 数组语法 <div v-bind:style"[baseStyle,...]"></div>

分支结构

  • v-show本质就是标签display设置为none,控制隐藏
    • v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。
  • v-if是动态的向DOM树内添加或者删除DOM元素
    • v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件

循环结构

  • v-for <li v-for="item in items">
  • key 的作用
    • key来给每个节点做一个唯一标识
    • key的作用主要是为了高效的更新虚拟DOM

基础案例

tab 选项卡

    <div id="app">
        <div class="tab">  
            <ul>
                  <!--  
                    1、绑定key的作用 提高Vue的性能 
                    2、 key 需要是唯一的标识 所以需要使用id, 也可以使用index ,
						index 也是唯一的 
                    3、 item 是 数组中对应的每一项  
                    4、 index 是 每一项的 索引
                -->
                   <li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
              </ul>
              <div  :key='item.id' v-for='(item, index) in list'>
                    <!-- :  是 v-bind 的简写   绑定属性使用 v-bind -->
                    <img :src="item.path">
              </div>
        </div>
    </div>
<script>
    new  Vue({
        //  指定 操作元素 是 id 为app 的 
        el: '#app',
            data: {
                list: [{
                    id: 1,
                    title: 'apple',
                    path: 'img/apple.png'
                }, {
                    id: 2,
                    title: 'orange',
                    path: 'img/orange.png'
                }, {
                    id: 3,
                    title: 'lemon',
                    path: 'img/lemon.png'
                }]
            }
    })

</script>

vue常用特性

表单操作

通过v-model 获取单选框中的值

 	<!-- 
		1、 两个单选框需要同时通过v-model 双向绑定 一个值 
        2、 每一个单选框必须要有value属性  且value 值不能一样 
		3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据
		gender 的值就是选中的值,我们只需要实时监控他的值就可以了
	-->
   <input type="radio" id="male" value="1" v-model='gender'>
   <label for="male"></label>
   <input type="radio" id="female" value="2" v-model='gender'>
   <label for="female"></label>

<script>
    new Vue({
         data: {
             // 默认会让当前的 value 值为 2 的单选框选中
                gender: 2,  
            },
    })
</script>

自定义指令

自定义指令规则(获取元素焦点)

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  	// 当绑定元素插入到 DOM 中。 其中 el为dom元素
  	inserted: function (el) {
    		// 聚焦元素
    		el.focus();
 	}
});

自定义指令规则


// bind - 只调用一次,在指令第一次绑定到元素上时候调用
Vue.directive('color', {
      // bind声明周期, 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
      // el 为当前自定义指令的DOM元素  
      // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
	bind: function(el, binding){
	el.style.backgroundColor = binding.value.color;
	}
});

局部指令,在vue实例中里面添加:

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

计算属性

表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁。


computed: {
//  reverseString   这个是我们自己定义的名字 
	reverseString: function(){  
	return xxx;
}

计算属性是基于它们的依赖就行缓存的,方法不存在缓存

过滤器

vue.filter('过滤器名称',function(value){
	xxx;
})
  • Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。
  • 过滤器可以用在两个地方:双花括号插值和v-bind表达式。
  • 过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示
  • 支持级联操作
  • 过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本
  • 全局注册时是filter,没有s的。而局部过滤器是filters,是有s的

侦听器 watch

  • 使用watch来响应数据的变化
  • 一般用于异步或者开销较大的操作
  • watch 中的属性 一定是data 中 已经存在的数据
  • 当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听

案例:验证用户名

vue项目目录结构

目录/文件 说明
build 项目构建(webpack)相关代码
config 配置目录,包括端口号等。我们初学可以使用默认的。静态资源目录,如图片、字体等。
node_modules npm 加载的项目依赖模块
src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:assets: 放置一些图片,如logo等。components: 目录里面放了一个组件文件,可以不用。App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。main.js: 项目的核心文件。
static 静态资源目录,如图片、字体等。
test 初始测试目录,可删除
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
index.html 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档,markdown 格式

综合案例

图书管理


文章作者: linxueya
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 linxueya !
评论
  目录
喜迎
春节