前端—Vue框架式开发基础一

Vue-又称为渐进式JavaScript框架

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

目录

生成Vue实例

Vue实例中的参数

指令

数据绑定指令

数据响应式

双向数据绑定

事件绑定

事件修饰符

按键修饰符

属性绑定

class样式处理

style样式处理

分支循环结构

循环结构

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

---

生成Vue实例

var vm = new Vue({el:'',data:{}})

Vue实例中的参数

el：

元素的挂载位置。绑定的标签id等（选择器、DOM元素等）

el:'#app'

data：

模型数据，存放数据的容器( 对象)

data:{list:[{..},{..},{..}]}

methods：

里面放事件调用的函数 (对象)

methods:{sun:function(){console.log{'触发sun函数就打印一下sun'}}}

computed：

里面放计算属性 (对象)，用{{名字 }调用

指令

指令的本质是自定义属性，格式为：v- 开头

v-cloak：

解决插值表达式中的闪动问题，闪动就是刷新页面先出现标签{{}}，后被替换。需要写样式:[v-cloak]{dispaly:none}来解决闪动问题。

数据绑定指令

v-text：

        填充纯文本，与插值表达式相同，更简洁

v-html：

        填充html片段，存在安全性问题：易被攻击

        本网站内部数据可使用，来自第三方的数据不可使用

v-pre

填充原始信息，显示原始信息，跳过编译器过程

数据响应式

        1：html中的响应式（屏幕尺寸变化导致样式变化）

        2：数据响应式（数据的变化导致页面内容的变化）

        3：数据绑定：将数据自动填充到标签中，而不是手动

v-once：

        只编译一次，显示内容后不再具有响应式功能

        应用场景：显示的信息后续不需要在修改，用v-once可提高性能

双向数据绑定

用户修改页面内容，内存的数据跟着变化，进而影响插值表达式内的值变化

v-model：

        为数据绑定，(双向数据绑定)，在data中定义绑定名和值

<div id='#add'>
    <div>{{msg}}</div>
    <input type='text' v-model='msg'>
</div>

事件绑定

v-on：事件绑定，缩写（@click）

<div @click='num++'>点击</div>

事件调用方式：

直接绑定函数名或调用函数

<button v-on:click='handle'></button>
<button v-on:click='handle()'></button>

事件修饰符

.stop ：阻止冒泡，阻止冒泡到父元素上

<button v-on:click.stop='函数名'></button>

.prevent：阻止默认行为 ,标签默认跳转行为

<a href:'http://www.baiidu.com' v-on.click=.prevent='函数名'>百度</a>

按键修饰符

.keyup.enter     ：enter键所触发的某函数或事件

<imput type='text' v-on:keyup.enter='函数名'>

.keyup.delete   ：delete键所触发的

<imput type='text' v-on:keyup.delete='函数名'>

自定义按键修饰符 ：

自己所创建的含有个别意义的按键所触发的事件

1:可以直接在.keyup后面加上按键对应的event.keyCode值，但不直观

2：自定义的名字：

Vue.config.keyCodes.自定义名字=对应的event.keyCode值
<imput v-on:keyuo.自定义名字='函数名'>

属性绑定

动态属性绑定：

v-bind指令：可实现动态添加数据属性值，缩写为（:）

<a v-bind:href:'属性名' >跳转</a>
data:{url:'www......com'}

class样式处理

:class={ }

        为标签添加某些类名样式

对象语法：

        <div :class='{active:isAacitve}'></div>

        该inAactive是标志位，控制是否添加该类名

数组语法：

        <div :class='[activeClass,.....]'></div>

        在data中：{activeClass:'active',.......}

style样式处理

        :style'样式对象名'       ：只写对象名

        :style[对象类名1....]    ：数组中放data定义的多个对象样式

分支循环结构

v-if、v-else、v-else-if：相当于判断判断语句

<div v-if='score > 90'>优秀</div
<div v-else-if='score < 90 && score >80'>良好</div>
<div v-else>较差</div>
//在data中定义score的值，控制哪个div显示

v-if 和v-show的区别：

        1：v-if控制元素是否渲染到页面

        2：v-show控制元素是否显示，已经渲染到页面上了         

v-show：  值可在data中定义 flag为 true/false来控制

<div v-show='flag'>测试</div>

循环结构

:v-for   :遍历，搭配插值表达式，使标签和数据自动填充

        数组:

<li v-for='item in 数组名'>{{item}}</li>

<li v-for='(item,index) in 数组名'>{{item---index}}</li>

        数组中放多个对象：
 

<li v-for='item in 数组名'>
    <span>{{item.uname}}</span>
    <span>{{item.cname}}</span>
</li>
//在data中：
data:{数组名:[{uname:'',cname:''},{uname:'',cname:''},.....]}

        对象：

<li v-for='(value,key,index) in 对象名'>{{value+item+index}}</li>
value是对应值，key对应键，index对应索引

:key     :不显示，只用于帮助vue区分每个标签，提高性能，

        key:'值'，其中一项的id值，若无id，可用对象的索引

<li :key='item.index' v-for='(item,index) in 数组名'>{{item---index}}</li>
//尽量在data中的每个对象中都有自己的专属id，循环后可用于标识

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

<div v-if='v==13' v-for='(v,k,i) in 对象名'></div>

只打印或渲染对象内的值为13的数据，

先有条件，再遍历，再判断是否符合该条件。数组、对象都可结合