Vue笔记

标签：el Vue 绑定笔记指令 msg data

Vue
一、 Vue基础
1. Vue概述
 Vue:渐进式JavaScript框架
 声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建
 官网:https://cn.vuejs/org/v2/guide/
2. Vue基本使用

Vue的基本使用步骤
1.    需要提供标签用于填充数据
2.    引入Vue.js库文件
3.    可以使用Vue的语法做功能
4.    把Vue提供的数据填充到标签里面

//差值表达式{{}},将数据填充到HTML标签中,差值表达式支持基本的计算操作
<div id=”app”>{{msg}}</div>
<Script>
    var vm = new Vue({
        el:’#app’,                    //el:元素的挂载位置(值可以是CSS选择器或DOM元素)
        data:{msg:’Hello Vue’}        //data:模型数据(值是一个对象)
    });
</Script>

二、 Vue模板语法
1. 指令
 本质就是自定义属性
 指令的格式:以v-开始(比如:v-cloak)
 v-cloak指令用法
 差值表达式存在的问题:”闪动”
 V-cloak指令可以解决闪动问题
 解决该问题的原理:先隐藏,替换好值之后再显示最终的值

v-cloak指令的用法
    提供样式:[v-cloak]{display:none;}
    在差值表达式所在的标签中添加v-cloak指令
    原理:先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果
    <div id=”app”><div v-cloak>{{msg}}</div></div>

2. 数据绑定指令
 v-text填充纯文本
a) 相比插槽表达式更加简洁
 v-html填充HTML片段
a) 存在安全问题
b) 本网站内部数据可以使用,来自第三方的数据不可以用
 v-pre
a) 显示原始信息,跳过编译过程(分析编译过程)

//差值表达式{{}},将数据填充到HTML标签中,差值表达式支持基本的计算操作
<div id=”app”>
<div v-text=’msg’></div>        //输出: <h1>Hello Vue</h1>
<div v-html=’msg’></div>        //输出:Hello Vue(h1格式)
<div v-pre>{{msg}}</div>        //输出:{{msg}}
</div>
<Script>
    var vm = new Vue({
        el:’#app’,                    //el:元素的挂载位置(值可以是CSS选择器或DOM元素)
        data:{msg:’<h1>Hello Vue</h1>’}        //data:模型数据(值是一个对象)
    });
</Script>

3. 数据响应式指令
 如何理解响应式
 Html5中的响应式(屏幕尺寸的变化导致样式的变化)-
 数据的响应式(数据的变化导致页面内容的变化)
 什么是数据绑定
 数据绑定:将数据填充到标签中
 v-once只编译一次
 显示内容之后不再具有响应式功能
 使用场景:如果显示的信息后续不需要再修改,可以使用v-once,这样可以提高性能. <div v-once>{{msg}}</div>
4. 双向数据绑定
 v-model指令用法
 <input type=’text’ v-model=’uname’>
 MVVM设计思想
 M(model)
 V(view)
 VM(View-Model)

5. 事件绑定
 v-on指令用法

<input type=’button’ v-on:click=’num++’ />

<input type=’button’ @click=’num++’ />

 事件函数的调用方式
 直接绑定函数名称

<input type=’button’ @click=’函数’ />

 调用函数

<input type=’button’ @click=’函数()’ />

 事件函数参数传递
 普通参数和事件对象

事件绑定-参数传递
1.    如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数
2.    如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是$event
v-on:click=’fun(123,456,$event)

 事件修饰符
 .stop阻止冒泡

<a v-on:click.stop=’handle’>跳转</a>        //event.stopPropagation()

 .prevent阻止默认行为

<a v-on:click.prevent=’handle’>跳转</a>

 按键修饰符
 .enter回车键

<input v-on:keyup.enter=’submit’>

 .delete删除键

<input v-on:keyup.delete=’handle’>

 自定义按键修饰符
 全局config.keyCodes对象

Vue.config.keyCodes.f1=112

6. 属性绑定
 v-bind指令用法

<a v-bind:href=’url’>跳转</a>

<a :href=’url’>跳转</a>

7. 属性绑定
 Class样式处理
 对象语法

<div v-bind:class=”{active: isActive}”></div>

 数组语法

<div v-bind:class=”{activeClass , errorClass}”></div>
data:{ activeClass:’active’, errorClass:’error’}

样式绑定相关语法细节:
    对象绑定和数组绑定可以结合使用
    Class绑定的值可以简化操作
    默认的class如何处理?默认的class会保留

 Style样式处理
 对象语法

<div v-bind:style=”{color:activeColor,fontSize:fontSize}”></div>

 数组语法

<div v-bind:style=”{baseStyles,overridingStyles }”></div>

8. 分支循环结构
 分支结构
 v-if
 v-else
 v-else-if

<div>
    <div v-if=’score>=90’>优秀</div>
    <div v-else-if=’score>=60&&score<90’>合格</div>
    <div v-else>不合格</div>
</div>

 v-show

<div v-show=’flag’>v-show测试案例</div>
data:{flag:false}_

 v-if和v-show的区别
 v-if控制元素是否渲染到页面
 v-show控制元素是否显示(已经渲染到了页面)
 循环结构
 v-for遍历数组

<li v-for=’item in list’>{{item}}</li>

<li v-for=’(item,index) in list’>{{item}}+’—‘{{index}}</li>

 key的作用:帮助Vue区分不同的元素,从而提高性能

<li :key=’item.id’ v-for=’(item,index) in list’>{{item}}+’—‘{{index}}</li>

 v-for遍历对象

<div v-for=’(value,key,index) in object’></div>

 v-if和v-for结合使用

<div v-if=’value==12’ v-for=’(value,key,index) in object’></div>

三、 Vue常用特性
1. 表单操作
 Input单行文本、Textarea多行文本
 Select下拉多选<Select v-model=””><option></option></Select>
 Radio单选框
 Checkbox多选框
 表单域修饰符
 Number:转化为数值

<input v-model.number=”age” type=”number”>

 Trim:去掉开始和结尾的空格

<input v-model.trim=”name” type=”number”>

 Lazy:将input事件切换为change事件 //当控件失去焦点的时候,{{age}}才会变为age的值

<input v-model.lazy=”age” type=”number”>
{{age}}

2. 自定义指令
 自定义制定的语法规则(获取元素焦点)

Vue.directive(‘focus’,{
    Inserted:function(el){
    el.focus();
}
})

 自定义制定用法

<input type=”text” v-focus>

 带参数的自定义指令(改变元素背景色)

Vue.directive(‘color’,{
    Inserted:function(el,binding){
        //binding是形参,对应{color:”orange”}, binding.value就是拿到这个对象的值,
binding.value.color就是从对象中拿出color的值
    el.style.backgroundColor=binding.value.color;
}
})

 指令的用法

<input type=”text”v-color=’{color:”orange”}’>

 局部指令

new Vue({
    el:”#app”,
    directives:{
        focus:{
            Inserted:function(el){
            el.focus();
        }
}
}
})

3. 计算属性

new Vue({
    el:”#app”,
    data:{ msg:’Hello’ }
    computed:{
        reverseMessage:function(){
            return this.msg.split(‘’).reverse().join(‘’)
        }
}
})
{{reverseMessage}}

 计算属性和方法的区别
 计算属性是基于它们的依赖进行缓存的
 方法不存在缓存
4. 过滤器
 过滤器的作用
 格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等
 自定义过滤器

Vue.filter(‘过滤器名称’,function(value){
    //过滤器业务逻辑
}

 过滤器的使用

<div>{{ msg | upper}}</div>
<div>{{ msg | upper | lower}}</div>
<div v-bind:id=” id | formatId ”></div>

 局部过滤器

new Vue({
    el:”#app”,
filters:{
        upper:function(){}
}

})

 带参数的过滤器

Vue.filter(‘format’,function ( value , arg ){
    //value就是过滤器传递过来的参数
    //arg才是实际内容
}

 过滤器的使用

<div>{{date | format(‘yyyy-MM-dd’) }}</div>

5. 侦听器
 侦听器的应用场景
 数据变化时执行异步或开销较大的操作
 侦听器的用法

watch:{
    firstName:function(val){
    //val表示变化之后的值
    this.fullName=val+this.lastName;
},
lastName:function(val){
    this.fullName=this.firstName+val;
}
}

四、 Vue前后端交互模式
1. Restful形式的URL
 HTTP请求方式
 Get 查询
 POST 添加
 PUT 修改
 DELETE 删除
2. 接口调用-axios用法
 Axios的基本特性
 支持浏览器和node.js
 支持promise
 能拦截请求和响应
 自动转换JSON数据
 Axios的基本用法

Axios.get(‘/adata’).then(ret=>{
    //data属性名称是固定的,用于获取后台响应的数据
    console.log(ret.data)
})

Axios Get无参数

客户端

服务器

Axios Get/Delete传递参数

 通过URl传递参数

客户端

服务器

客户端

服务器

 通过Params选项传递参数

客户端

服务器

POST传递参数
 通过选项传递参数(默认传递的是json格式的数据)

客户端

服务器

 通过URLSearchParams传递参数

客户端

服务器

PUT传递参数

客户端

服务器

Axios的响应结果
 响应结果的主要属性
 data:实际响应回来的数据
 headers:响应头信息
 status:响应状态码
 statusText:响应状态信息

客户端

服务器

Axios的全局配置
 axios.defaults.timeout=3000; //超时时间
 axios.default.baseURL=’http://localhost:3000/app’; /默认地址
 axios.default.headers[‘mytoken’]=’eqweqwqweeqwe’; //设置请求头

Axios拦截器
 请求拦截器

 响应拦截器

标签：el,Vue,绑定,笔记,指令,msg,data
From： https://www.cnblogs.com/kaede/p/16824485.html

相关文章

赞助商

阅读排行