vue|vue 入门 vue|vue入门

前端工作就是与界面打交道。
vue是mvvm前端视图层框架，提供了数据的双向绑定。以数据驱动视图的改变，视图通过input绑定onchange事件来改变数据。
vue双向数据绑定的原理请查看链接：https://www.cnblogs.com/libin-1/p/6893712.html
一.常见的vue指令 1.插值表达式 v-cloak v-text v-html
【vue|vue 入门】我直接导入的是vue的包，可在vue官网上复制。
案例中我只写了主要部分

> [v-cloak]{ display: none; } // 1.导入包 ="lib/vue.js">// 2.dom元素 // --{{msg}} // ++++{{msg}} // 123 // // > let vm = new Vue({ // mvvm 的 vm 层做中间处理 el:"#app", // elment 绑定的dom元素 data:{// mvvm 的 m 层用来处理数据 msg:"hollow word", msg2:"1234542" } })

v-cloak 是常用的，里面可以随意添加内容
v-text 若是在里面添加别的数据会被覆盖掉
v-html 可渲染html结构的数据，同样也会覆盖原有的内容

2. 属性绑定指令 v-bind 可简写成“ ： ”

// 第一种写法 v-bind:属性 // 第二种写法：属性 > let vm = new Vue({ el:"#app", // elment 绑定的dom元素 data:{ title:"请点击此处按钮" } })

3.事件绑定指令 v-on 可简写 @事件

// 事件后面直接写js表达式会报错，会把console当成一个属性，而非js表达式 // Property or method "console" is not defined 报错 // // 正确的写法 > let vm = new Vue({ // mvvm 的 vm 层做中间处理 el:"#app", // elment 绑定的dom元素 data:{ // 页面渲染的数据 title:"请点击此处按钮" }, methods:{// 所有方法写在这个里面 show:function(){ console.log("你点击了我的心") } } })

v-on：事件 = “方法 / 属性” 等号后面不能直接写js表达式，会报错，里面没有这个属性

4.事件修饰符

.stop 阻止冒泡
.self 只有当点击自己时，才会触发事件。只阻止自己身上的事件冒泡
.prevent 阻止默认事件
.capture 事件捕获模式触发事件
.once 事件只触发一次

outer center inner // inner // center // out > let vm = new Vue({ el: "#app", data: { }, methods: { show() { console.log("center") }, out() { console.log("outer") }, inner() { console.log("inner") } } })

5.双向数据绑定 v-model
它运用在表单元素中，实现 v 视图改变 m数据跟着改变
v-bind 实现的是 data 改变 v 视图改变

{{msg}}let vm = new Vue({ el: "#app", data: { msg:"今天是个好天气呀，好天气呀", title:"我是一个标题" } })

6.v-if v-show
v-if 当切换让它显示时，它才在内存中显示，切换频繁的话，消耗性能
v-show 只是给元素添加了一个样式 display:none; 频繁切换，消耗性能小
二.vue中样式的写法通过v-bind绑定属性，操作样式。分为2种，一种直接绑定class，可嵌套外联样式；一种直接绑定style ，写行内样式。全文都是采用简写指令。v-bind 简写为 ‘ ：’

第一种，以数组的模式传递样式第二种，在数组中写三元表达式第三种，在数组中以对象方式传递样式第四种，直接以对象模式传递样式内联样式写法 > let vm = new Vue({ el: "#app", data: { flag: true, obj1: { 'color': 'red', 'font-size': '22px' } } })

三.在vue中使用v-for 遍历数组

{{key+1}}---{{item.name}} {{cont}} > let vm = new Vue({ el: "#app", data: { list: [ { 'id': 1, 'name': 'wangfeng' }, { 'id': 2, 'name': 'zhaowan' } ] } })

四.vue中的事件处理事件监听 v-on
v-on:事件 = 事件处理函数

全局自定义事件
自动获取焦点事件 v-focus

// 调用自定义事件Vue.directive('focus',{// 使用时直接在dom元素中插入v-focus inserted:function(e){ e.focus(); } })

局部自定义事件
在定义自定义事件名称时，不需要加 v- 只在使用时加 v-

let vm = new Vue({ el: "#app", data: { }, directives: { // 自定义事件 // el，当前被绑定的dom元素binding是传入的参数 'color': function (el, binding) { el.style.color = binding.value; }， 'focus':funcion(el){ el.focus(); } } })

按键修饰符
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

enter
tab
delete (捕获“删除”和“退格”键)
esc
space
up
down
left
right

-自定义按键修饰符
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 @keyup.f2=‘submit’
Vue.config.keyCodes.f2= 113

五.vue 中的过滤器filter 1. 全局过滤器 Vue.filter
全局过滤器，其它实例皆可调用

{{msg | dataform}} {{msg | dataform}} > let vm = new Vue({ el:"#app", data:{ msg:"这是请求来的数据" } }); let vm2 = new Vue({ el:"#app2", data:{ msg:"这是请求来的数据" } }); Vue.filter('dataform', function (data) { // data传过来的数据，msg console.log(data+2); // 结果：这是请求来的数据2 })

2.私有过滤器
实例身上自己的过滤器，其它的实例不能调用
当有全局过滤器，也有私有过滤器时，实例先找自己身上的过滤器，没有，再找全局过滤器

{{msg | dataform}} > let vm = new Vue({ el:"#app", data:{ msg:"这是请求来的数据" }, filters:{// 私有过滤器 dataform:fuction(data){ console.log(data+1); // 结果：这是请求来的数据1 } }); // 全局过滤器 Vue.filter('dataform', function (data) { // data传过来的数据，msg console.log(data+2); // 结果：这是请求来的数据2 })

六. vue中动画运用单个动画用transtion包裹要做动画的元素
动画类名默认情况下是v-开头
若想自定义动画则只需要在transition标签上添加name属性即可

> .v-enter-active,.v-leave-active{ transition: opacity 1s; } .v-enter,.v-leave-to{ // 入场动画，出场动画 opacity: 0; }.fade-enter-active,.fade-leave-active{// 自定义类名动画 transition: opacity 1s; } .fade-enter,.fade-leave-to{ opacity: 0; } 这是单个动画这是单个动画 > let vm = new Vue({ el: "#app", data: { flag: false, flag2: false } })

多个动画用transition-group包裹，用法同上
tag属性默认值是span，给tag添加什么标签，dom就以这个标签渲染
appear是页面一打开，就有的动画特效
其它属性请参考vue中文文档：https://vuejs.bootcss.com/v2/guide/transitions.html

{{item.id}}---{{item.name}} > let vm = new Vue({ el: "#app", data: { list: [ { id: 1, name: "wangfai", age: 18 }, { id: 2, name: "wangdeng", age: 28 }, { id: 3, name: "wangjin", age: 48 } ] } })