大前端基础【4-1笔记】Vue基础指令_数据驱动视图abc-CSDN博客

本文链接：https://blog.csdn.net/qiuqiu1628480502/article/details/115941363

传统网页开发步骤

请求数据------->根据数据生成网页结构------->监听用户操作,变化

元素变化------->发送服务器请求------->更新结构(用户点击新增,删除等)

传统网页开发缺点

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

Vue.js简介

解决上述问题，渐进式JavaScript框架，官方网站:https://cn.vuejs.org/

1、Vue.js核心特性

1、数据驱动视图

1、数据变化会自动更新到对应元素中，无需手动操作 DOM，这种行为称作单向数据绑定。

2、对于输入框等可输入元素，可设置双向数据绑定。双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定。

3、Vue.js 的数据驱动视图是基于 MVVM 模型实现的。MVVM (Model – View – ViewModel )是一种软件开发思想。

Model 层，代表数据
View 层，代表视图模板
ViewModel 层，代表业务逻辑处理代码

4、MVVM的优缺点

基于MVVM 模型实现的数据驱动视图解放了DOM操作
View 与 Model 处理分离，降低代码耦合度
但双向绑定时的 Bug 调试难度增大
大型项目的 View 与 Model 过多，维护成本高

2、组件化开发

组件化开发，允许我们将网页功能封装为自定义 HTML 标签，复用时书写自定义标签名即可。
组件不仅可以封装结构，还可以封装样式与逻辑代码，大大提交了开发效率与可维护性。

2、vue安装

1、本地引入

开发版本：https://cn.vuejs.org/js/vue.js
生产版本：https://cn.vuejs.org/js/vue.min.js

2、cdn 引入

最新稳定版： https://cdn.jsdelivr.net/npm/vue
指定版本：https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js

3、npm安裝

最新稳定版： npm install vue
指定版本： npm install vue@2.6.12

3、vue.js基础语法

3.1 vue实例

Vue 实例是通过 Vue 函数创建的对象，是使用 Vue 功能的基础。

var vm = new  Vue({
	//选项对象
});

3.2 el选项

用于选取一个 DOM 元素作为 Vue 实例的挂载目标。只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素.代表 MVVM 中的 View 层（视图）。

1、可以为 CSS 选择器格式的字符串或 HTMLElement 实例，但不能为 html 或 body。

var vm = new  Vue({
	//选项对象
	el: "#app"
})

var app = document.querySelector("#app")
var vm = new Vue({
    el: app
})

2、挂载完毕后,可以通过vm.$el进行访问

var vm = new Vue({
	el: "#app"
});
console.log(vm.$el);

3、未设置 el 的 vue 实例，也可以通过 vm.$mount() 进行挂载，参数形式与 el 规则相同。

var vm = new Vue({})
vm.$mount("#app")

3.3 插值表达式

挂载元素可以使用 Vue.js 的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，写法为 {{ }}。

	<body>
		<div id="app">
			{{1 + 11}}
		</div>
	</body>
	<script src="lib/vue.js"></script>
	<script>
		var vm = new Vue({
			
		});
		vm.$mount("#app");
		console.log((vm.$el))
	</script>

3.4 data选项

注意：如果是数组,改变length和某一个下标的值,不会更新到视图,我们可以使用Vue.set(vm.arr,0,'333')进行设置.

<div id="app">
    {{title}}
    <ul>
      	<li>{{ arr[0] }}</li>
    	<li>{{ arr[1] }}</li>
    	<li>{{ arr[2] }}</li>
	</ul>
</div>

</body>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            title: "标题文本",
            arr: [
                1,2,3
            ]
        }
    });
<script/>

3.5 methods方法

处理数据,与data同级

<li>{{ fn(arr[0]) }}</li>

methods:{
    fn(value){
   	   return this.prefix + value
    }
}

vue.js指令

指令,本质上讲就是自定义HTML属性,vue.js的指令本质上就是以v-开头的自定义属性.

1、内容处理

1、v-once

添加v-once属性后,数据只会加载一次,如果下次conten更新以后,第二个p标签不会发生任何变化

<div id="app">
    <p>{{content}}</p>
    <p v-once>{{content}}</p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
   		 content: '我是数据'
    }
})

2、v-text

通过v-text只可以设备纯文本内容,如果是html标签,则显示源标签,不会被解析为html.

<div id="app">
	<p v-text="content">我是數據數據</p>
	<p v-text="content2">我是數據數據</p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
  	  content: '我是数据',
      content2: '<span>123</span>'
    }
})

3、v-html

元素内容整体替换为指定的HTML文本

<div id="app">
	<p v-html="content">我是數據數據</p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
    	content: '<span>123</span>'
    }
})

2、属性绑定

1、v-bind指令

v-bind指令用于动态绑定HTML属性

<div id="app">
    <p v-bind:title="content">123</p>
    <p :title="content">123</p>
    <!-- <p title="123">123</p> -->
</div>

var vm = new Vue({
    el: "#app",
    data: {
    	content: '123'
    }
})

与插值表达式类似,v-bind也允许使用表达式

var vm = new Vue({
    el: "#app",
    data: {
        content: '123',
        prefix: 'num'
    }
})

<p :class="'num' + 1 + 2 +3"></p>

解析为:
<p :class="num123"></p>

<p :class="prefix"></p>

解析為：
<p class="num"></p>

<p v-bind="attrObj">123</p>

attrObj:{
    id: 'abc',
    class: 'abc'
}
解析为:
<p id="abc" class="abc">123</p>

2、class绑定

2.1 单个属性绑定

class是HTML属性,可以通过v-bind进行绑定,并且可以与class属性共存,例如:

<div id="app">
      <p v-bind:class="cls1"></p>
      <p :class="cls1" class="abc"></p>
  </div>

data: {
   cls1: "a"
}

2.2 属性绑定特殊处理

对于 class 绑定， Vue.js 中还提供了特殊处理方式。

<p :class="{b: isB, c: isC}"></p>

data:{
  isB: true,
  isC: true
}

<p :class="['a', {'b': isB}]">123</p>

data:{
  isB: true
}

3、style绑定

style是HTML属性,可以通过v-bind进行绑定,并且可以与style属性共存,例如:

<div :style="styleObj">123</div>

data:{
    styleObj:{
   	 	width: "100px",
    	height: "200px"
    }
}

注意:如果是style标签中的属性与:style中的属性重合,则会被覆盖掉

<div :style="styleObj" style="width: 50px;">123</div>
//最终:width:50px
data:{
    styleObj:{
   	 	width: "100px",
    	height: "200px"
    }
}

3、渲染指令

1、v-for

用于遍历数据渲染结构，常用的数组与对象均可遍历。

1.1 数组

数组可以获取到值,也可以获取到下标

<p v-for="item in arr">{{item}}</p>
<p v-for="(item, index) in arr">值为:{{item}},索引为:{{index}}</p>

data: {
	arr: [1,2,3,4]
}

1.2 对象

遍历对象的时候可以遍历出键和值,也可以有第三个参数,获取索引值.

<p v-for="(value, key) in obj">元素内容是:{{value}},键为:{{key}}</p>
<p v-for="(value, key, index) in obj">元素内容是:{{value}},键为:{{key}},索引值为:{{index}}</p>

data:{
	 obj:{
        age:10,
        sex:"女",
        name:'qiuqiu'
      }
}

1.3 数值

item是1,2,3,4,5,index是索引值

<p v-for="(item, index) in 5">{{item}}---{{index}}</p>

1.4 注意

1、用v-for的同时,应始终指定唯一的key属性,可以提高性能并避免问题,

2、进行操作时,无需进行key设置

3、v-for与template模板占位符结合使用,将某一个指定的内容区域进行循环创建.

2、v-show

用于控制元素的显示和隐藏,适用于显示隐藏频繁切换时使用。

<div id="app">
    <p v-show="show">显示</p>
    <p v-show="!show">隐藏</p>
    <p v-show="22 > 11">显示</p>
</div>
  
  data:{
  	show: true
  }

注意：

template无法使用v-show指令，因为template不是真实的元素,v-show是添加内联样式display:none进行控制显示隐藏的.

3、v-if

用于根据条件控制元素的创建和移除,如果是false,则不创建元素,不适合频繁的显示隐藏操作

<div id="app">
    <p v-if="bool">123</p>
  </div>
  
  data: {
      bool: false
    }

 <p v-if="bool">123</p>
 <p v-else-if="false">123</p>
 <p v-else>123</p>

v-else-if相当于else if,v-else无需填写条件

出于性能考虑,应避免将v-if与v-for应用于同一个标签,因为v-for的优先级更高,会先渲染,然后进行v-if的判断.(将v-if给父元素)