1.8.vue基础

最新推荐文章于 2024-11-17 21:03:46 发布

贾国鹏

最新推荐文章于 2024-11-17 21:03:46 发布

阅读量110

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/jiaguopeng/article/details/113279155

版权

vue基础

1.什么是vue
2.开发环境准备
3.使用vue
4.vue基本语法
5.vue常用组件

1.什么是vue

是一套前端框架，简化前端大量的jquery，原生js的重复DOM操作代码。用来简化开发。

是一套数据驱动视图的前端框架，基于MVVM架构，M：model数据，V：view视图，vm：viewModel视图数据监听器，当数据改变，修改视图；当视图发生变化，修改model数据。是一种数据双向绑定监听的实现。

是国人尤雨溪开发。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WZtNCcYy-1611758103461)(./img/image-20200715121533263.png)]

2.开发环境准备

hbuilderX前端开发工具
chrome浏览器调试程序

3.使用vue

引入vue.js依赖

cdn加速服务引入：文件存储在服务器上通过外网访问不需要本地存放。

本地引入：
- 开发版本：支持vue调试工具，开发使用
- 正式版本：不支持vue调试工具，上线使用

入门测试：

<!--vue绑定页面数据 需要一个根标签作为渲染的基板-->
<div id="base">
    <!--插值表达式，获取data对象中的数据-->
    {{msg}}
</div>

<script>
    //原data数据对象 也可以在vue对象中直接定义
    let mydata = {msg:'aaaa'}
    //创建Vue实例对象，每个vue应用都是从这里开始
    let vm = new Vue({
        //将基板与vue对象绑定 如果没有在基板中的数据 不会被vue渲染
        el:"#base",
        //页面上显示的数据对象   
        data:mydata
 })

    //取得vue实例对象中的数据,与原data对象中数据一致
    console.log(vm.msg)
    //设置vue实例对象中数据，原data对象也改变,同时页面显示数据发生改变
    vm.msg='aaa'
    console.log(mydata.msg)
	console.log(vm.msg)
    mydata.msg='bbb'
	console.log(mydata.msg)
    console.log(vm.msg)
</script>

注意点：

只有当实例被创建时就已经存在于 data 中的 property 才是响应式的，后续向vue实例对象中添加的数据无效。建议页面中数据预先定义在vue实例对象中。

4.vue基本语法

插值表达式

数据绑定基本方式就是使用 {{ xxx }}（双大括号）的文本插值可将modelView中的数据渲染到页面中对应的位置，页面中绑定的位置根据modelView中定义的数据改变而改变

vue对象中的属性

vue对象中的属性可以通过创建的vue对象读取到，但是如果读取vue对象的属性时通常需要通过$指明跟data中用户自定义属性有所区分

console.log(vm.$data)
console.log(vm.$el)
console.log(vm.$data.msg)
//为了省略 如果对data中的数据进行取值时 可以省略$data
//vm.$data.msg 等同于 vm.msg
console.log(vm.msg)

v-html插入html代码

因为vue中关注数据绑定而不是页面中元素变化插值默认不可以插入html代码如果在一些特殊场景需要插入html代码时可以使用v-html指令
```
<div id="base">
    <div v-html="msg"></div>
</div>
    
<script>
new Vue({
  el: '#base',
  data: {
    msg: '<h1>带格式的标题</h1>'
  }
})
</script>
```

v-bind指令将html中元素与viewModel中数据绑定 html的属性都可以通过v-bind与数据模板进行绑定

		<style>
			.test{
				background-color: lightcoral;
				width: 100%;
				height: 100%;
			}
		</style>	

		<div id="base">
			<div v-bind:class="mycls">
				123
			</div>
		</div>

        <script>
            var myvue = new Vue({
                el:"#base",
                data:{
                    mycls:"test"
                }
            })
        </script>

同时因为class属性是允许多值的比较特殊所以在class属性的绑定上还提供了额外的方式

		<style>
			.cls1{
				width: 100px;
				height: 100px;
			}
			.cls2{
				background-color: #F08080;
			}
			.cls3{
				color: aliceblue;
			}
		</style>	

		<div id="base">
            <!-- 一定有的class属性 可以单写class属性赋值（cls3） 
            需要动态控制的class属性 可以通过bol值决定是否生效 并且可以配置多个（cls1 cls2） -->
			<div class="cls3" v-bind:class="{'cls1':cls1use,'cls2':cls2use}">
				123
			</div>
		</div>
		
        <script>
            var myvue = new Vue({
                el:"#base",
                data:{
                    cls1use:true,
                    cls2use:true
                }
            })
        </script>

注意：v-bind指令比较常用所有在使用v-bind指令时通常可以简写为 :属性

<div class="cls3" :class="{'cls1':cls1use,'cls2':cls2use}">

v-if指令绑定bol值控制页面元素是否可见


		<div id="base">
            <div v-if="showStatus">test</div>
		</div>
		<script>
            var myvue = new Vue({
                el:"#base",
                data:{
                    showStatus:false
                }
            })
        </script>
<!--  通常配合使用还有 v-else-if v-else  可以在标签属性上直接使用表达式 或绑定data中的数据  -->
    	<div id="base">
            <div v-if="showStatus==1">test1</div>
			<div v-else-if="showStatus==2">test2</div>
			<div v-else>test3</div>
		</div>
		<script>
            var myvue = new Vue({
                el:"#base",
                data:{
                    showStatus:1
                }
            })
        </script>

v-on指令绑定事件

在开发过程中页面中的效果通常会通过浏览器对事件的监听来触发自定义的函数对事件进行处理

在vue中在元素中通过v-on绑定事件，再在vue对象的methods中定义处理的函数

vue主要关注绑定的数据，所以在vue的methods中定义的函数主要用来改变viewmodel（data）中的数据，

获取时通常可以使用this 此时this表示myvue这个对象

		<div id="base">
            <input type="text" :value="test" />
            <input type="button" value="点击触发修改绑定数据" v-on:click="myMethod" />
		</div>
		<script>
            var myvue = new Vue({
                el:"#base",
                data:{
                    test:"123"
                },
                methods:{
					myMethod:function(){
					this.test='abc';
				}
            })
        </script>

绑定事件也很常用也有省略写法

		<div id="base">
            <input type="text" :value="test" />
                <!--简写  v-on:click ==>  @click   -->
            <input type="button" value="点击触发修改绑定数据" @click="myMethod" />
		</div>
		<script>
            var myvue = new Vue({
                el:"#base",
                data:{
                    test:"123"
                },
                methods:{
                    <!--简写  myMethod:function(){  ==>  myMethod(){  -->
					myMethod(){
					this.test='abc';
					}
                 }
            })
        </script>

v-model 双向绑定

表单元素是页面中非常常用的一类元素通常用来与用户交互接收用户的输入点击等动作

在获取用户输入时 vue提供了v-model 并且可以通过v-model进行双向绑定

双向绑定（可以通过输入改变viewmodel中的数据也可以改变viewmodel中的数据直接显示在绑定的元素上）

		<div id="base">
            <!-- 文本框1为双向绑定 用户的输入可以改变viewmodel中的test的值
                此时与test值绑定的其他位置的数据可以直接改变
                点击按钮时 通过事件触发test值的改变 被双向绑定的第一个文本框 也会接受到test值的				改变而改变 此为双向绑定-->
            <input type="text" v-model="test"/>
            <input type="text" :value="test"/>
                {{test}}
            <input type="button" value="点击触发修改绑定数据" @click="myMethod" />
		</div>
		<script>
            var myvue = new Vue({
                el:"#base",
                data:{
                    test:"123"
                },
                methods:{
					myMethod(){
						this.test='abc';
					}
                }
            })
        </script>

双向绑定在表单元素中应用较多除了文本框外在其他元素上有不同的用法

**单选框：**v-model可以用来对单选框分组不需要再加name属性同时可以通过v-model 获取或改变单选按钮中选中的值

		<div id="base">
           <input type="radio" id="male" value="male" v-model="gender"/>
			<label for="male">男</label>
			<input type="radio" id="fmale" value="fmale" v-model="gender"/>
			<label for="fmale">女</label>
			{{gender}}
		</div>
		<script>
            var myvue = new Vue({
                el:"#base",
                data:{
                    gender:"fmale",
                }
            })
        </script>

**复选框：**v-model可以用来对复选框分组不需要再加name属性同时可以通过v-model 获取或改变复选按钮中选中的值复选按钮的数据格式为数组

	<div id="base">
         	<input id="java" type="checkbox" value="1" v-model="hobby" />
		<label for="java">java</label>
		<input id="c#" type="checkbox" value="2" v-model="hobby" />
		<label for="c#">c#</label>
		<input id="python" type="checkbox" value="3" v-model="hobby" />
		<label for="python">python</label>
		{{hobby}}
	</div>
	<script>
           var myvue = new Vue({
               el:"#base",
               data:{
                   hobby:[1,2]
               }
           })
       </script>

**下拉菜单：**v-model需要定义在select框上用来获取或者设置选中的option的value

		<div id="base">
          	<select v-model="area" @change="getVal">
				<option disabled value="">------请选择------</option>
				<option value="100">北京</option>
				<option value="110">上海</option>
				<option value="120">深圳</option>
			
			</select>
		</div>
		<script>
            var myvue = new Vue({
                el:"#base",
                data:{
                    //设置area的值 可以让对应的option选中
                    area:""
                },
                methods:{
                    getVal(){
                        console.log(this.area);
                    }
                }
            })
        </script>

注意：v-model在不同的元素上使用方法略有差别用法上实际上还是与viewmodel中的数据绑定

v-for 循环结构 vue中如果需要迭代在页面中生成的元素可以使用v-for进行遍历遍历的数据需要在data中定义好

		<div id="base">
          	<ul>
            <!-- lis为数组 li是数组中遍历到的数据 
            	 在遍历过程中 可以通过li读取数组中的json元素的值 -->
				<li v-for="li in lis">{{li.content}}</li>
			</ul>
		</div>
		<script>
            var myvue = new Vue({
                el:"#base",
                data:{
                    lis:[{content:'主页'},{content:'相关新闻'},{content:'关于我们'}]
                }
            })
        </script>

v-for还经常用在table和select上来动态加载table数据或者select的下拉列表数据

		<div id="base">
          	<table border="1">
				<caption>测试table</caption>
				<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
				<tr v-for="tr in trs">
					<td>{{tr.name}}</td>
                    <td>{{tr.age}}</td>
                    <td>{{tr.gender}}</td>
				</tr>
			</table>
		</div>
		<script>
            var myvue = new Vue({
                el:"#base",
                data:{
                    trs:[{name:"jack",age:16,gender:"男性"},
						{name:"rose",age:17,gender:"女性"},
                        {name:"小明",age:20,gender:"女性"}
                        ]
                }
            })
        </script>

		<div id="base">
          	<select v-model="area" @change="getVal">
				<option disabled value="">------请选择------</option>
            <!--遍历过程中 需要显示在页面中的数据 通常用插值 { { option.text } }
            如果是给属性赋值 需要使用绑定数据的语法 给属性做绑定 
            并通过遍历到的数据给其赋值  : value = "option.val" -->
			    <option v-for="option in options" :value="option.val">	
                      {{option.text}}
                </option> 

			
			</select>
		</div>
		<script>
            var myvue = new Vue({
                el:"#base",
                data:{
                    options:[{val:"1001",text:"北京"},
						{val:"2001",text:"上海"},
						{val:"3001",text:"深圳"}]
                }
            })
        </script>

钩子函数

vue的数据绑定渲染是通过vue对象自动实现的，这个过程我们无法主动参与，vue为了让程序员可以在进行这些步骤时，加一些程序员自己的处理，加入了钩子函数钩子函数实际上就是在vue对象创建过程中，提供了几个执行的时机，在这些时机发生时可以同时执行程序员自己的代码类似javaEE中的监听器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nOkt1f8B-1611758103466)(.\img\lifecycle.png)]

vue中提供了一些钩子函数

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy

destroyed

vue对象创建 create

vue挂载 mount

vue属性改变 update

vue销毁 destory

如果有一些自己需要执行的代码可以写在钩子函数中语法如下

		<div id="base">
          	<select v-model="area" @change="getVal">
				<option disabled value="">------请选择------</option>
            <!--遍历过程中 需要显示在页面中的数据 通常用插值 { { option.text } }
            如果是给属性赋值 需要使用绑定数据的语法 给属性做绑定 
            并通过遍历到的数据给其赋值  : value = "option.val" -->
			    <option v-for="option in options" :value="option.val">	
                      {{option.text}}
                </option> 

			
			</select>
		</div>
		<script>
            var myvue = new Vue({
                el:"#base",
                data:{
                    options:[{val:"1001",text:"北京"},
						{val:"2001",text:"上海"},
						{val:"3001",text:"深圳"}]
                },
                methods:{
                    mymethod(){
                        //xxxxx
                    }
                },
                created() {
					//创建出vue对象后执行
				},
                mounted(){
                    //vue对象挂载到#base后执行
                }
            })
        </script>

5.vue常用组件

1.axios

Vue推荐使用 axios 来完成 ajax 请求。

axios 基于promise对象针对promise对象的成功和失败封装在.then 和.catch中

.then中编写服务器正常响应的代码

.catch中编写服务器异常响应的代码

导入axios文件

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

请求写法：

//param 为请求时需要传递的参数 可以从vue的data中取值放在参数中
axios.get('请求路径?'+param)
    .then(response => {
    //response为完整的响应的数据
    console.log(response);
    //response.data为服务端响应的json
    console.log(response.data);
}).catch(function(error) {
    //异常时的异常信息对象
    console.log(error);
});
//post方式 请求路径后不拼参数 请求的参数放在post方法的第二个参数上
axios.post('请求路径',param)
    .then(response=>{
    console.log(response);
    console.log(response.data);
}).catch(function (error) {
    console.log(error);
});

注意：使用post方式传递参数时如果参数为json格式请求的参数会放入请求头的payload中不在formdata中

后台直接用getParameter取值会取不到如果后台想通过getParameter取值需要让参数进入formdata中，在axios中如果参数格式为url普通键值对参数（xxx=xxx&yyy=yyy）那么参数就会进入formdata

手动拼接参数不便时我们会需要使用到一个把json转为url普通键值对参数的工具

引入地址：

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>

用法：

axios.post('请求路径', window.Qs.stringify(this.myform))
    .then(response=>{
    console.log(response);
    console.log(response.data);
}).catch(function (error) {
    console.log(error);
});

求的参数会放入请求头的payload中不在formdata中

手动拼接参数不便时我们会需要使用到一个把json转为url普通键值对参数的工具

引入地址：

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>

用法：

axios.post('请求路径', window.Qs.stringify(this.myform))
    .then(response=>{
    console.log(response);
    console.log(response.data);
}).catch(function (error) {
    console.log(error);
});