VUE的认识

野性酷女 2022-02-25 10:44 224阅读 0赞

## VUE ##

vue官网([https://cn.vuejs.org/][https_cn.vuejs.org])

1.VUE了解  
① VUE是一个渐进式的js框架(MVVM模式)  
1）渐进式：学多少，用多少  
2）MVVM模式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bmVfRmx5aW5nRnJvc3Q_size_16_color_FFFFFF_t_70]  
② 特性  
轻量：  
Vue.js库的体积非常小的，并且不依赖其他基础库。  
数据绑定：  
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。  
指令：  
内置指令统一为(v—\*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。  
插件化：  
Vue.js核心不包含Router（路由）、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。  
组件化：  
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用  
允许大写自定义标签

2.VUE入门  
![在这里插入图片描述][20190401123909939.png]  
① 引入vue.js

② 准备工作台

③ 创建Vue对象

var app=new  Vue({
    		el:"#app",
    		data{
    				name:"张三",
    				age:33
    		}
    })

3.Vue实例挂载(el)的标签  
每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。 实例上的属性和方法只能够在当前实例挂载的标签中使用。

var app=new  Vue({
        	el:"#app", //el:".app"    el:"div"
        	data{
        	...
        	}
       })

4.Vue中的数据(data)详解

① Vue实例的数据保存在配置属性data中, data自身也是一个对象

data : {
    	    //可以是字符串
            message : "我是一个很单纯的p",
            //也可以是对象
            employee: { 
        		    name : "隔壁老文",
        			age : 17,
        			doing(){
        				alert("吃饭")
        			}
        	},
        	//还可以是数组
        	array:["aa","bb","c"]
        	......
    }

② 修改data对象中的数据,及时同步的页面上

③ 通过Vue实例直接访问

<div id="app">
    		{
       {message}}   //我是一个很单纯的p
    		{
       {employee.name}}   //隔壁老文
    		{
       {employee.age}}   //17
    		{
       {array[0]}}   //a
    </div>

5.Vue中的方法(methods)详解

<div id="app">
    		{
       {say()}}
    </div>
    
    var app = new Vue({
    			el : "#app",
    			data : {
    				.....
    				}
    			},
    			methods:{
    				say:function(){
    					//this指向当前对象，当前app对象
    					return "hello:"+this.user.name+"!";
    				},
    				swim:function(){
    					console.debug("小狗的游泳姿势，还不错。。。");
    				}
    			}
    		});
    	  //通过Vue对象实例调用方法
    	  app.swim();
    	  this.swin();

6.vue数据双向绑定体验(v-model)

<div id="app">
    			
    		<input type="text"  v-model="message" />
    		
    		<h1>{
       {message}}</h1>
    </div>
    
    <script type="text/javascript" src="js/vue/vue.min.js"></script>
    <script type="text/javascript">
    		var app = new Vue({
    			el : "#app",
    			data : {
    				message : "我是一个很单纯的p",
     			}
    		});
    </script>

## VUE表达式语法 ##

1 .简单表达式(在 \{ \{ \}\} 中进行简单预算)  
在进行简单运算时，如果参与运算的值有字符串，-，\*，/会把字符串转换成数字在运算，+则会字符串拼接

<div id="app">
            
            <h1>{
       {5+5}}</h1>     10
            
            <h1>{
       {5+"v5"}}</h1>    5v5
            <h1>{
       {5+"5"}}</h1>       55
            
            <h1>{
       {"5"-"5"}}</h1>    0
    	    
            <h1>{
       {5*5}}</h1>    25
        
            <h1>{
       {"5"*"5"}}</h1>   你在做* / - %  字符串它会自动转为数字    25
            
            <h1>{
       {5/5}}</h1>    1
            <h1>{
       {5/5}}</h1>    1
    </div>

2.三目运算

3.字符串操作

<div id="app">
            {
       {"这是字面值"}}<br/>
            {
       {"这是字面值".length}}<br/>  //字段长度
            {
       {message.length}}<br/>   //message的长度
            {
       {message.substring(1,5)}}<br/>  //获取message的下标1-5的字段
            {
       {message.substring(2,6).toUpperCase()}}<br/>  //英文字段大写
    </div>
    <script type="text/javascript" src="js/vue/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                message: "这是data中的数据"
            }
        });
    </script>

4.对象操作

<div id="app">
        {
       {user}}<br/>
        {
       {user.toString()}}<br/>  
        {
       {user.name}}<br/>
        {
       {user.age}}<br/>
        {
       {user.getAge()}}<br/>
    </div>
    <script type="text/javascript" src=“js/vue/vue.min.js”></script>
    <script type="text/javascript">
        var user = {
            name: "张三",
            age: 29,
            getAge: function () {
                return this.age
            },
            toString:function(){
                return "姓名:"+this.name+",年龄:"+this.age;
            }
        };
        var app = new Vue({
            el: "#app",
            data: {
                user: user
            }
        });
    </script>

5.数组操作

<div id="app">
        {
       {hobbys}}<br/>
        {
       {hobbys[0]}}<br/>
        {
       {hobbys.length}}<br/>
    </div>
    <script type="text/javascript" src=“js/vue/vue.min.js”></script>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                hobbys:["打游戏","踢足球",'泡MM',"泡GG"]
            }
        });
    </script>

## VUE指令 ##

vue指定的一些特殊的属性，格式:v-xxx  
① v-text  
主要用于展示一个标签的数据，但标签原来的数据会被覆盖，文本展示，不会解析h5的标签，会原封不动的展示

<span v-text="message">原来的数据</span>
     
     message: "<h1>这是HTMl代码</h1>"

② v-html  
主要用于展示一个标签的数据，但标签原来的数据会被覆盖，会解析h5的标签，展示相应的效果

<span v-text="message">原来的数据</span>
    
    message: "<h1>这是HTMl代码</h1>"

③ v-for  
基于数据源多次循环达到多次渲染当前元素  
数据源可以是Array，Object，NumBer，String  
语法1：

<标签 v-for="元素 in 数据源"></标签>

语法2：

<标签 v-for="(元素,索引|键) in 数据源"></标签>

语法3：

<标签 v-for="(元素,键,索引) in 对象"></标签>

实例

<div id="app">
        <h1>循环数组</h1>
        <ul>
            <li v-for="hobby in hobbys">{
       {hobby}}</li>
        </ul>
        <h1>遍历对象</h1>
        <ul>
            <li v-for="value in student">{
       {value}}</li>
        </ul>
    
        <h1>带索引循环数组</h1>
        <ul>
            <li v-for="(hobby,index) in hobbys">{
       {index}}--{
       {hobby}}</li>
        </ul>
        <h1>带键遍历对象</h1>
        <ul>
            <li v-for="(value,key,index) in student">{
       {index+1}}---{
       {key}}--{
       {value}}</li>
        </ul>
    </div>
    <script type="text/javascript" src=“js/vue/vue.min.js”></script>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                hobbys : ["爬山","游泳","打豆豆","睡觉"],
                student : {
                    name: "小毛",
                    age: 29,
                    sex: "男",
                },
                num : 10,
                str : "itsource",
            }
        });
    </script>

④ v-show  
是否显示此数据，只是隐藏了数据，还是存在的

<标签名 v-show="true/false"></标签名>

⑤ v-if  
根据表达式的值的真假条件渲染元素，如果不满足条件，就会从页面上删除

<标签名 v-if="判断表达式"></标签名>

实例

<div id="app">
    	    <div v-if="show">你看到我了!</div>
    	    <div v-if="hidden">你看不到我了!</div>
    	    <div v-if="score>=90">优秀</div></div>
    	<script type="text/javascript" src=“js/vue/vue.min.js”></script>
    	<script type="text/javascript">
    	    var app = new Vue({
    	        el: "#app",
    	        data: {
    	            "show":true,
    	            "hidden":true,
    	            "score":90,
    	        }
    	    });
    	</script>

⑥ v-else  
当v-if表达式不成立时, v-else执行

<标签名 v-if="表达式"></标签名>
    <标签名 v-else></标签名>

⑦ v-else-if

<标签名 v-if="表达式"></标签名>
    <标签名 v-else-if="表达式"></标签名>
    <标签名 v-else-if="表达式"></标签名>
    <标签名 v-else></标签名>

⑧ v-model  
在表单控件上创建双向绑定  
1） 表单控件

<input type="text" v-model="textVal"> {
       {textVal}}
    <input type="password" v-model="pwdVal"> {
       {pwdVal}}
    <hr/>
    <input type="radio" v-model="sexVal" value="true"  name="sex">男
    <input type="radio" v-model="sexVal" value="false" name="sex">女 {
       {sexVal}}
    <hr/>
    <input type="checkbox" v-model="hoppes" value="1">篮球
    <input type="checkbox" v-model="hoppes" value="2">足球
    <input type="checkbox" v-model="hoppes" value="3">排球
    <input type="checkbox" v-model="hoppes" value="4">棒球{
       {hoppes}}

2） TextArea控件

<textarea v-model="textarea"></textarea>{
       {textarea}}

3）Select控件

<select v-model="skills">
            <option v-for="v in selectVal" :value="v.id">{
       {v.text}}</option>
    </select>
        {
       {skills}}
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                textVal:"hello",
                pwdVal:"123456",
                sexVal:true,
                hoppes:[],
                textarea:"请输入文本",
                selectVal:[
                    {id:1,text:"中国"},
                    {id:2,text:"日本"},
                    {id:3,text:"美国"},
                    {id:4,text:"英国"},
                    {id:5,text:"俄罗斯"},
                ],
                skills:""
            }
        })
    </script>

⑨ v-on 事件绑定  
语法：

<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>

简写

<标签 @事件句柄="表达式或者事件处理函数"></标签>

实例

<div id="app">
            <button v-on:click="clickUp()">点我啊</button>
            <button @click="clickUp()">点我啊</button>
     </div>
     </body>
     <script>
            new Vue({
                el:"#app",
                data:{},
                methods:{
                    clickUp:function(){
                        alert("叫你点你就点啊！！")
                    }
                }
            })
     </script>

⑩ v-bind  
将data中的数据绑定到标签上,作为标签的属性  
语法1：

<标签 v-bind:标签属性名字="表达式"></标签>

简写：

<标签 :标签属性名字="表达式"></标签>

实例

<div id="app">
        <img v-bind:src="src" v-bind:width="width">
         <img :src="src" :width="width">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                width:300,
                src:"imgs/4d076f01024a9fa76039018c6f8b88af.jpg"
            }
        })
    </script>

语法2：

<标签 v-bind="对象"></标签>

实例

<div id="app">
            <img :src="src" :width="width">
            <hr/>
            <img v-bind="props">
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    width:300,
                    src:"imgs/4d076f01024a9fa76039018c6f8b88af.jpg",
                    props:{
                        width:300,
                        src:"imgs/90c58b032c79ead09f58201f91d91059.jpg",
                    }
                }
            })
        </script>

## Vue组件基础 ##

1.组件是Vue中很强大的功能:简单点就是把很多的代码块封装成一个模板,多处都可以使用，再进一步:自定义html标签:包含了一堆的功能;  
2.组件的分类  
①全局组件  
全局组件可以作用于全局的挂载对象;

<id id="app">
            <test></test>
    </id>
    <script>
            Vue.component("test",{
                template:"<h1>全局组件</h1>"})
            new Vue({
                el:"#app",
                data:{
                }
            })
    </script>

②局部组件  
局部组件:只能作用于挂载的当前对象;

<id id="app">
       <test></test>
    </id>
    <script>
            new Vue({
                el:"#app",
                data:{},
                components:{
                    test:{
                        template:"<h1>局部组件</h1>"
                    }
                }
            })
    </script>

主要事项：  
① 模板中必须有根标签  
② 先定义组件在挂载  
③ 驼峰命名自定义标签的格式：`<my-Late><my-Late>`

3.组件使用两种HTML模板  
方式1：直接在template属性写上html代码字符串

components:{
             test:{
                   template:"<h1>局部组件</h1>"
             }
        }

方式2：如果html代码过长，方式1就不适合，使用方式2将当前网页中的html标签作为模板代码  
1） 使用template标签或者script标签，script 标签要加上type属性，如下

<template id="ml">
                <h1>template标签中的html</h1>
            </template>
    
           <script type="text/template" id="ml">
                <h1>template标签中的html</h1>
            </script>

2） template属性上使用上门的html模板代码

new Vue({
    	        el:"#app",
    	        data:{},
    	        components:{
    	            "mylate":{
    	            	template:"#ml"  // #代表找到对应的html代码作为当前组件的模板代码
    	            }
    	        }
    	    })

3）组件中的数据必须是函数  
语法:

"组件的名字":{
            template: "",
            data : function(){
                return {
                  键1:值1,
                  键2:值2
                }
            }
       }

## 路由 ##

1.概念  
路由是负责将进入的浏览器请求映射到特定的 组件 代码中。 即决定了由谁(组件)去响应客户端请求。  
2.使用方法  
① 导入vue-router.js

② 在js中定义路由和组件

③ 挂载到dom元素上

//创建一个vue对象
    		var app = new Vue({
    			el : "#app",//挂载在app上
    			router : router
    		//使用路由对象
    		});

④ 使用路由和定义路由出口

<div id="app">
    		
    		
    		
    		
    		<router-link to="/product">公司产品</router-link>
    		<router-link to="/about">关于我们</router-link>
    		<hr />
    		
    		
    		<router-view></router-view>
    	</div>

效果图  
![在这里插入图片描述][20190402183322874.png]

[https_cn.vuejs.org]: https://cn.vuejs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0p1bmVfRmx5aW5nRnJvc3Q_size_16_color_FFFFFF_t_70]: /images/20220225/cb0a67025d0e498da112b14784b956a7.png
[20190401123909939.png]: /images/20220225/f94972a2f6334ca8b8245f338fda51e7.png
[20190402183322874.png]: /images/20220225/b9085feb50db403cbcfa792f0d34f83a.png