VUE的认识

VUE

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

1.VUE了解
① VUE是一个渐进式的js框架(MVVM模式)
1）渐进式：学多少，用多少
2）MVVM模式：

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

2.VUE入门

① 引入vue.js

<script src="vuejs/vue.js"></script>

② 准备工作台

  <div id="app">
	 {{name}}
	 {{age}}
  </div>

③ 创建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对象中的数据,及时同步的页面上

<script type="text/javascript">
	var app=new  Vue({
		.....
    	data{
    	   message : "我是一个很单纯的p",
    	}
   })
   this.message="xxxxxxx"
   app.message="xxxxxxx"
</script>

③ 通过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中值的改变同步到data中的message上:
		v-model:数据的绑定；
    		将app对象中的message值绑定到input中，同时输入input值后，
    		也作用于app的message值。-->	
		<input type="text"  v-model="message" />
		<!-- 显示app对象的message的值 -->
		<h1>{{message}}</h1>
</div>
<!-- 引入vue文件 -->
<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.三目运算

<div id="app">
		<!--三目运算  -->
		{{ show1?"真":"假"}}
	</div>
	<script type="text/javascript" src="js/vue/vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el : "#app",
			data : {
				show1 : true
			}
		});
	</script>

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

<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript" src="js/vue/vue-router.js"></script>

② 在js中定义路由和组件

    var index = Vue.component("index", {
        template : "<h1>首页</h1>"
    });
    //>>2.公司产品：组件
    var product = Vue.component("product", {
        template : "<h1>公司产品</h1>"
    });
    //>>3.关于我们：组件
    var about = Vue.component("about", {
        template : "<h1>关于我们</h1>"
    });

    var router = new VueRouter({
        routes : [ {
            path : "/",//路由地址
            component : index
            //路由对应的资源
        }, {
            path : "/about",//路由地址
            component : about
            //路由对应的资源
        }, {
            path : "/product",
            component : product
        }, ]
    });

③ 挂载到dom元素上

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

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

<div id="app">
		<!-- 使用 router-link 组件来导航. -->
		<!-- 通过传入 `to` 属性指定链接. -->
		<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
		<!-- 使用app中的路由：匹配到product路由地址，然后在router-view标签中展示这个地址对应的资源 -->
		<router-link to="/product">公司产品</router-link>
		<router-link to="/about">关于我们</router-link>
		<hr />
		<!-- 路由出口 -->
		<!-- 路由匹配到的组件将渲染在这里 -->
		<router-view></router-view>
	</div>

效果图