VUE（一）初识VUE.JS

初识VUE.JS

DOM操作频繁，代码繁杂；DOM操作与逻辑代码混合，可维护性差；不同功能区域书写在一起，可维护性低；模块依赖关系复杂

Vue.js简介

遵循vue.js规则来使用这个工具提高我们的开发

数据驱动视图

**单向数据绑定：**数据变化会自动更新到对应元素视图中，无需手动操作DOM

**双向数据绑定：**自动将元素输入内容更新给数据，实现数据和元素内容的双向绑定（可输入元素）

**MVVM：**软件开发思想

• model—代表数据
• view—试图模板
• viewmodel—业务逻辑处理代码

基于MVVM模型的数据驱动试图解放了DOM操作，View和Model处理分离，降低代码的耦合度

双向绑定时的Bug调试难度增大，维护成本低

组件化开发

将网页功能封装为自定义HTML标签，复用时书写自定义标签名，可以封装结构、封装样式和逻辑代码，提高了开发效率和可维护性

基础语法

el选项

用于选取一个DOM元素作为VUE实例的挂载目标，挂载元素内部才会被VUE进行处理，代表MVVM中的View层

• vm.$el（）用来获取el挂载元素

  var vm=new Vue({  el:'#app'  });
  

• vm.$mount（） 后期进行挂载内容添加

  var vm=new Vue({}); app=document.getElementById('app')
  vm.$mount(app);
  

插值表达式

可以通过插值表达式{{ }}为元素进行动态内容的设置，不能在内容区域以外的部分使用，不能在插值表达式内部使用

data选项

data中的数据可以直接在视图中通过插值表达式访问，当响应式数据发生改变时，视图会自动进行更新

data:{
       title:'标题文本',
       arr:['内容1','内容2','内容3'] }

对页面上数据内容的删除增加需要使用pop、push、Vue.set(vm.arr，1，’lala‘)进行修改

vm.arr.pop()
vm.arr.push('lalla')
Vue.set(vm.arr,1,'嘿嘿')

methods选项

用于存储需要在Vue实例中使用的函数

methods:{
    fn(value){
    return this.prefix + value.split('-').join('')   },

在methods方法中可以使用this来指向这个选中元素Vue中的任何内容，如果有多个函数也可以进行重复的调用执行

 methods:{
    fn(value){
         this.fn1();
         this.fn2(); },
    fn1(){
    console.log('执行了函数fn1') }}

VUE.JS基础指令

以v-开头HTML自定义属性

内容处理

v-once

使元素内部的插值表达式只生效一次

<p v-once>不会改变{{title}}</p>

v-text

元素内容整体替换为指定纯文本数据，实现数据驱动视图的效果

data:{content:'<span>这是span</span>'}
<p v-text='content'>lalalal</p>
//最终返回的是带有标签<span>这是……

v-html

将元素内容整体替换为指定的HTML文本，与v-text区别是可以将标签文本直接渲染

data:{content:'<span>这是span</span>'}
<p v-html='content'>lalalal</p>
//标签会进行渲染输出这是span

属性绑定

v-bind

动态绑定HTML属性，v-bind：title='content’可以简写为：title

<p :title="title">这是一个标签</p>
<p :class="myclass">这是一个标签</p>

如果需要一次绑定多个属性，还可以绑定对象

data:{
 attrobj:{
 title:'lalal',
 id:'box',
 //自定义属性
 'data-title':'这是data-title内容' }}

Class绑定

class是HTML属性，可以通过v-bind进行绑定，并且可以与class属性共存,但是不能进行修改

<p class="a" :class="cls1">这是标签</p>
//书写多个类名进行绑定，可以直接在data中写多个样式，也可以采用键值对的方法来进行书写
<p :class="{x:true,y:false}"></p>
//数组绑定处理
<p :class="['a','b',classB,{c:isc}]"></p>
data:{  classB:'c', isc:false }
//在data中进行具体样式是否显示的操控

Style绑定

HTML属性，可以通过v-bind进行绑定，并且可以与style属性共存，如果也同时设置了style中的width属性，那么加载的是 :style中的

 styleObj:{
     width:'200px',
     height:'100px',
     backgroundColor:'red',//驼峰命名法
    'font-size':'32px'//引号包裹-短线}

如果我们要绑定多个样式对象时，可以设置为数组方式进行绑定

<p :style="[basestyle,styleObj]">文本内容</p>

渲染指令

v-for

用于遍历数据渲染结构，常用的数组与对象均可便利，也可以遍历给定的数字进行结构的渲染

<!--遍历数组 -->
<li v-for="(item,index) in arr">
元素内容为:{{item}}，索引值为:{{index}}
</li>
<!-- 遍历对象 -->
<li v-for="(item,key,index) in obj">
元素内容为:{{item}},  索引值为:{{index}} , 键为{{key}}</li>
<!-- 遍历随机数 -->
<li v-for="(item,index) in 5">数字是{{item}},索引值为{{index}}</li>

补充：Vue当我们进行数据操作时，可能出现不一致的现象，我们就需要对v-for属性中添加唯一的key值（最好不要使用index）来提高渲染效率

template可以帮助我们模块占位符，v-for指令可以进行内容的循环创建

v-show

用于控制元素的显示与隐藏，适用于显示隐藏频繁切换时使用

<p v-show="bool">内容显示</p>
//也可以直接给show赋值true或者false

v-show设置值为false时，就是给这个元素添加display:none属性，template这种不是真实元素标签设置v-show指令是无效的

v-if

用于根据条件控制元素的创建与移除，完全没有进行创建操作

<p v-if="false">这是一个标签</p>
<p v-else-if="true">这是两个标签</p>
<p v-else>这是最后一个标签</p>
//如果前面有一条true,则下面的内容都不会进行执行了

注意：绑定key值可以帮助我们性能优化，不产生问题；出于性能考虑，应避免将v-if和v-for用于同一标签，将v-if绑定给父级
下篇vue内容继续~