vue2 基础

一、什么是 vue

构建用户界面
- 用 vue 网 html 页面中填充数据。
框架
- 框架是一套现场的解决方案，程序员必须遵守框架的语法，去编写业务代码。
- 学习 vue ，即学习 vue 框架中规定的语法。
- vue 包括五大内容：vue 的指令、组件（对 UI 结构的复用）、路由、Vuex、vue 组件库。

二、vue 的两个特性

数据驱动视图
- 数据的变化会驱动视图的自动更新。
- 好处：程序员只需维护好数据，页面的结构会被 vue 自动渲染出来。
双向数据绑定

在页面中，form 表单负责采集数据，Ajax 负责提交数据。
- js 数据的变化，会被自动渲染到页面上。
- 页面上表单采集的数据发生变化时，会被 vue 自动获取到，并更新到 js 数据中。
注意:数据驱动视图和双向数据绑定的底层原理是 MVVM (Mode 数据源、View 视图、ViewModel 就是vue 的实例)。

三、指令

1.内容渲染指令

v-text 指令的缺点：会覆盖元素内部原有的内容！
{{}} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
v-html 指令的作用：可以把带有标签的字符串，渲染到 HTML 内容中！

<div id="app">
	<p>{{ username }}</p>
    <p v-text="username"></p>
    <p v-html="message"></p>
</div>

<script>
	const vm = new Vue({
    	el: '#app',
    	data: {
    		username: 'zhangsan',
    		message: '<h1>This is h1</h1>'
    	}
    })
</script>

2. 属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中。

v-bind: 指令，为元素的属性动态绑定值。
实际开发中简写:
在使用v-bind:属性绑定期间，若绑定内容要进行字符串拼接，则字符串的外面必须使用单引号''包裹。

<div id="app">
	<div v-bind:title="'box' + index"></div>
</div>
<script>
	const vm = new Vue({
    	el: '#app',
    	data: {
    		index: 1
    	}
    })
</script>

3.事件绑定指令

v-on:事件名绑定事件。
简写@。

<div id="app">
	<button v-on:click="add"></button>
    <button @click="add2"></button>
</div>
<script>
	const vm = new Vue({
    	el: '#app',
    	data: {
    		index: 1
    	},
    	methods: {
    		add: function(){console.log(1)},
    		add2() {console.log('简写')}
    	}
    })
</script>

$event的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event.

<div id="app">
	<button @click="add"></button>
    <button @click="add2(3, $event)"></button>
</div>
<script>
	const vm = new Vue({
    	el: '#app',
    	data: {
    		index: 1
    	},
    	methods: {
    		add: function(e){console.log(e)},
    		add2(n, e) {console.log(n,e)}
    	}
    })
</script>

事件修饰符：

.prevent:阻止默认事件。

<a @click.prevent="www.baidu.com">链接</a>

.stop:阻止冒泡事件

<div @click="xxx">
    <button @click.stop="xxx">按钮</button>
</div>

.once:绑定的事件只触发一次

4.双向数据绑定指令

注意：双向数据绑定指令，用于采集数据的标签中：例如 input、textarea、select。

v-model指令的修饰符
- .number:自动将用户输入的值转为数值类型。
- .trim:自动过滤掉输入的首位空白字符。
- .lazy:在 ‘change’ 时更新，而非 ‘input’。

<div id="app">
    <input v-model="username"></input>
    <textare v-model="username"></textare>
    <select v-model.number="city">
    	<option value="">请选择城市</option>
      	<option value="1">北京</option>
      	<option value="2">上海</option>
      	<option value="3">广州</option>
    </select>
</div>
<script>
	const vm = new Vue({
    	el: '#app',
    	data: {
    		username: 'zhangsan',
    		gender: '男',
    		city: 2
    	}
    })
</script>

5.条件渲染指令

v-show:动态为元素添加或移除 display:none样式，来实现元素的显示和隐藏。
v-if:每次动态创建或删除元素，来实现元素的显示或隐藏。

注意：v-show:频繁切换元素的显示状态时使用。v-if:如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来时使用。

v-if:使用的两种形式：
- 直接给定一个布尔值 true 或 false.
```
<p v-if="true">被 v-if 控制的元素</p>
```
- 给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏
```
<p v-if="type === 'A'">良好</p>
```
v-if的其它形式

<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else>差</div>

6.列表渲染指令

注意：实现 DOM 结构的复用。

语法：item in items
items：是待循环的数组。
item：是被循环的每一项。

<ul>
	<li v-for="item in list">姓名是：{{item.name}}</li>
</ul>
data: {
	list:[
		{id: 1, name: 'zs'},
		{id: 2, name: 'ls'}
	]
}

v-for中的索引：v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items。

<ul>
	<li v-for="(item, index) in list" :key="item.id">索引：{{index}}，姓名是：{{item.name}}</li>
</ul>
data: {
	list:[
		{id: 1, name: 'zs'},
		{id: 2, name: 'ls'}
	]
}

注意：使用v-for渲染列表时，必须使用 :key 维护，且它的值最好使用 item 对应的 id.

1.key 的值只能是字符串或数字类型

2.key 的值必须具有唯一性（即：key 的值不能重复）

3.建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）

4.使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）

5.建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

四、过滤器

注意：过滤器只在 vue2.x 和 vue1.x 中使用， vue3.x 将过滤器摒弃了。

过滤器，本质是一个函数。
在过滤器函数中，一定要有 return 值
在过滤器的形参中，可以获取到 “管道符” 前面待处理的那个值。
如果全局过滤器和私有过滤器同名，则此时按照“就近原则”，调用的是私有过滤器。
可以连续调用多个过滤器，过滤器之间用“管道符”分割。

<div id="app">
	<p>{{ message | toUpper}}</p>
    <div v-bind:id="rawId | formatId"></div>
</div>
<script>
    // 定义全局过滤器
    Vue.filter('formatId',(str)=>{
    	return str.charAt(0).toUpperCase() + str.slice(1) + '~~~~'
    })
	const vm = new Vue({
    	el: '#app',
    	data: {
    		message: 'msg'
    	},
    	// 定义私有过滤器
    	filters: {
    		toUpper() {
    			return str.charAt(0).toUpperCase() + str.slice(1)
    		}
   		}
    })
</script>

五、watch 侦听器

方法格式的侦听器
- 缺点1：无法在刚进入页面的时候，自动触发！
- 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！
对象格式的侦听器
- 好处1：可以通过 immediate 选项，让侦听器自动触发！
- 好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！

注意：实际开发一般使用方法格式的监听器或者对象.属性的对象格式的监听器。

<div id="app">
	<input type="text" v-model="username"></input>
    <input type="text" v-model="info.city"></input>
</div>
<script>
	const vm = new Vue({
    	el: '#app',
    	data: {
    		username: 'zhangsan',
    		message: 'msg',
    		info: {
    			city: '南昌'
    		}
    	},
    	// 定义监听器
    	watch: {
    		// 方法格式的监听器
    		username(newVal, oldVal) {
    			if(newVal === '') return
    			$.get('https://feibinandstudy/api/finduser/' + newVal, function(result){
    				console.log(result)
    			})
    		},
    		// 对象格式的监听器
    		message: {
    			// 监听器处理函数
    			handler(newVal, oldVal){
    				console.log(newVal, oldVale)
    			},
    			// 开启监听器自动触发一次
    			immediate: true,	
    		},
    		info:{
    			handler(newVal) {
    				console.log(newVal)
    			},
    			// 开启深度监听
    			deep: true
    		},
    		'info.username'(newVal){
    			console.log(newVal)
    		}
    	}
    })
</script>

六、计算属性

特点：
- 定义的时候，要被定义为方法。
- 在使用计算属性的时候，当普通的属性进行使用。
好处：
- 实现了代码的复用。
- 只要计算属性中依赖的数据源发生变化，计算属性也会自动重新求值。

<div id="app">
    <div>
      <span>R：</span>
      <input type="text" v-model.number="r">
    </div>
    <div>
      <span>G：</span>
      <input type="text" v-model.number="g">
    </div>
    <div>
      <span>B：</span>
      <input type="text" v-model.number="b">
    </div>
    <div class="box" :style="{ backgroundColor: rgb }">
      {{ rgb }}
    </div>
    <button @click="show">点击</button>
</div>
<script>
	const vm = new Vue({
    	el: '#app',
    	data: {
    		r: 0,
    		g: 0,
    		b: 0
    	},
    	methods: {
    		show() {
    			console.log(this.rgb)
    		}
    	},
    	// 定义计算属性
    	computed: {
    		rgb() {
    			return `rgb(${this.r}, ${this.g}, ${this.b})`
    		}
    	}
    })
</script>

七、axios

axios 是一个专注于网络请求的库。

axios方法

axios({
	// 请求方式
	methods: 'GET',
	// 请求路径
	url: 'http://www.feibinstudy/api/getbooks',
	// URL 中的查询参数
	params: {
		id: 1
	},
	// post 请求传递的数据
	data: {
		name: 'zhangsan',
		age: 23
	}
}).then(function(result)){
	console.log(result)
}

发起 GET 请求

<button id="btnGET">GET</button>
<script>
    document.querySelector('#btnGET').addEventListener('click', async function () {
    // 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！
  	// await 只能用在被 async “修饰”的方法中  
    /* axios.get('url地址', {
        // GET 参数
        params: {}
      }) */

      const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
        params: { id: 1 }
      })
      console.log(res)
    })
    
</script>

发起 POST 请求

<button id="btnPOST">POST</button>
<script>
    document.querySelector('#btnPOST').addEventListener('click', async function () {
      // axios.post('url', { /* POST 请求体数据 */ })
      const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', gender: '女' })
      console.log(res)
    })
</script>

八、vue-cli 的使用

安装 vue-cli:

npm install -g @vue/cli

在终端下运行如下的命令，创建指定名称的项目：

vue cerate 项目的名称

assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下
main.js 是项目的入口文件。整个项目的运行，要先执行 main.js
App.vue 是项目的根组件。

posted @ 2022-12-10 15:40 秋风里的蜜阅读(47) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Ajax基础

· JavaScript基础

· 1.Vue2.x指令+过滤器+侦听器+计算属性

· vue学习

· Vue基础

公告

昵称：秋风里的蜜
园龄： 5年9个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

feibinstudy