web_前端开发JS框架篇-Vue基础入门版-基础语法

vuejs概述

jQuery库是针对js的dom的封装，封装了好多原生js的dom操作繁琐的地方，那Vuejs是针对 html+css+js的一个封装虽然vuejs没有脱离这三大技术，但是在原有基础上进行了整合推出了 组件化开发的概念。

MVC框架:

Model - - - View - - - Controllor
模型 - - - 视图 - - - 控制者

框架(vue使用的)：

Model - - - View - - - View - - - Model
模型 - - - 视图 - - - 视图 - - - 模型

数据直接对应页面；
数据变化页面就变化；
页面变化数据就变化；
干掉了传统MVC结构中的业务逻辑直接使数据和页面绑定；
让页面操作更简单，所以Vue中没有 js的dom操作

Vue特点:

简单易上手(精通难)
一片html代码结合json 实现vue效果
双向数据绑定特点(不再需要dom操作)
数据和页面的效果直接绑定
数据变化页面直接变化干掉了中间的业务逻辑(后面说)
个人团队维护开源所以进步快
尤雨溪带队开发的
MVVM框架非常好用
在MVC框架基础上的一个升级(后面说)
Vuejs不支持IE8及以下
只要是IE9+ 几乎所有浏览器都支持
轻量级更适合开发移动端(PC端一样可以)
因为Vue的效果比较简单所以Vue不适合开发向大型电商网站那样复杂的页面
Vue开发PC端最多的是开发后台管理页面
SPA 单页面应用
Single Page Web Application (单页面 Web应用)

初步使用Vue搭建HelloWorld程序

<!--第二步 一片html代码-->
<div id="app">
    <h1>{{msg}}</h1>
</div>

//第一步: 引入vue.js文件
<script src="vue.js"></script>
<script>
    //第三步 定义json渲染vue
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"Hello World!"
        }
    })
</script>

vue的双向数据绑定演示

<div id="app">
    <h1>{{msg}}</h1>
    <input type="text" v-model="msg">
</div>

<script src="vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"Hello World!"
        }
    })
</script>

Vue基本结构的介绍

<!--第二步: 一片html代码 一般先定义一个统一的父元素,然后用vue去加载这一块元素
    那么以后这一块元素内所有的位置 都按照vue的语法来加载-->
<div id="app">
<!--这个是 Mustache模板语法
    格式: {{js表达式}}  js表达式包括:  三目表达式  运算符表达式
                                            方法调用  变量
          这个语法表示一种模板  将来会受vue渲染并执行
          就想蒸蛋糕的那个模具一样 会按照我们写的格式进行加载并取得结果
-->
    <h1>{{msg}}</h1>
</div>

<!--第一步 : 引入vue.js文件-->
<script src="vue.js"></script>
<script>
/*第三步:  定义json、渲染vue代码；
先把Vue对象创建出来，
构造方法需要传入一个json进行vue对象的配置，
有点类似于 `$.ajax({})` 参数的大括号就是针对当前ajax进行配置*/
    var vm=new Vue({
    //挂载目标(表示:当前vue语法，挂载到哪一个目标元素上面去；一旦挂载，那么该目标就按照vue语法加载)
		el:"#app", //值是一个字符串 里面传入选择器(一会讲 都支持哪些选择器)
		data:{ /*定义data是专门给挂载目标里面所使用的所有变量赋值*/
			msg:"我是vue变量的值"
		}
    });
</script>

Vue所支持的选择有哪些：

id选择器；
class选择器（如果有多个只会选择第一个）；
元素选择器；
如果有多个只会选择第一个
Vue2.x版本 不允许直接挂载到body上面去!!!
Do not mount Vue to <html> or <body> - mount to normal elements instead.
子代/后代选择器；
交集选择器；
所有的css3选择器都支持；

var vm=new Vue({
    //ID选择器
    // el:"#app",
    //class选择器
    // el:".pox",
    //元素选择器
    // el:"div",
    //子代/后代选择器
    // el:"body>#app",
    //交集选择器
    // el:"div#app",
    //所有css3选择器也支持
    el:"div:nth-child(1)",
    data:{
        msg:"我是数据"
    }
})

vue所支持的渲染的数据类型

1.字符串
2. number类型
3. boolean类型
4. 数组类型
5. 对象类型
6. 内置对象类型

<div id="app">
    <h1>{{msg}}</h1>
    <h1>{{num}}</h1>
    <h1>{{boo}}</h1>
    <h1>{{arr}}</h1>
    <h1>{{json}}</h1>
    <h1>{{d}}</h1>
</div>

var vm=new Vue({
	el:"#app",
	data:{
		msg:"我是字符串类型",
		num:5,
		boo:false,
		arr:["关羽","张飞","刘备"],
		json:{
			name:"小明",
			age:16
		},
		d:new Date()
	}

})

v-show指令的使用：

vue中提供了一些以v- 开头的指令，专门写到标签上面的，那么这些指令作用: 扩展标签原有功能；
该指令控制元素的显示与隐藏 v-show="变量或者表达式"；
变量或者表达式结果是true时，该元素显示；否则false隐藏。
v-show指令：控制的是元素的 display 属性。

<div id="app">
    <div id="box" v-show="boo"></div>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
	el:'#app',
	data:{
		boo:true
	}
});
</script>

v-if指令的使用：

v-if 指令：也是控制元素的显示与隐藏。

v-if="变量或者表达式" 变量或者表达式为true时元素显示、否则隐藏；跟 v-if 搭配使用的就是 v-else，如果v-if的条件为false 则v-else的元素显示； v-else没有值
跟随v-if的变化而变化，跟if..else语句一样。
v-else-if="变量或者表达式" 如果v-if里面的条件是false 则继续向下判断
v-else-if；v-else-if可以有多个谁是true谁显示。

使用注意点:

v-if和v-else-if 和v-else标签之间,不能有任何其他标签 否则报错！也就是保证v-if语句的完整性。

v-if和v-show都是控制元素显示隐藏,那么区别在哪里?

v-show 控制元素的显示隐藏用的是 display属性，也就是说不管条件是true还是false元素都会加载，只不过如果条件为false 元素设置display:none;
v-if 控制元素的显示与隐藏用的是 加载与不加载 如果条件为false 则元素直接从dom中删除，如果条件为true 则重新加载该元素。如果页面加载时条件为false 那么该元素都不会存在到dom中。
由以上结论可以看出：
如果有一个或单个元素或者父元素下的一堆元素，短时间内进行多次的显示隐藏那么推荐使用v-show；
如果一个元素是懒加载形式 暂时不用，等用到时在显示加载，则推荐使用v-if；

<div id="app">
    <!--<div id="box" v-if="boo"></div>
    <div id="pox" v-else></div>-->
    <ul>
        <li v-if="num==1">我是第一个li</li>
        <li v-else-if="num==2">我是第二个li</li>
        <li v-else-if="num==3">我是第三个li</li>
        <li v-else>我是第四个li</li>
    </ul>
</div>

var vm=new Vue({
	el:'#app',
	data:{
		boo:true,
		num:1,
	}
});

v-for指令的使用：

v-for指令：可以实现遍历数组或者js对象；然后根据遍历出来的数量加载指定数量的元素。
数组、对象需要在vue的data里面定义。

v-for指令遍历数组:

格式1: <标签 v-for="变量 in 数组对象">{{变量}}</标签>
格式2: <标签 v-for="(元素变量,索引标量) in arr">{{变量}}---{{索引}}</标签>

v-for指令遍历json对象：

格式1: <标签 v-for="属性值 in json对象"></标签>
格式2: <标签 v-for="(属性值,属性名) in json对象"></标签>
格式3: <标签 v-for="(属性值,属性名,索引) in json对象"></标签>

<div id="app">
<div v-for="k in arr">{{k}}</div>
<ul>
	<li v-for="(item,index) in arr">{{item}}====={{index}}</li>
	<li v-for="item in per">{{item}}</li>
	<li v-for="(item,key) in per">{{item}}====={{key}}</li>
	<li v-for="(value,key,index) in per">{{key}}====={{value}}===={{index}}</li>
</ul>

var vm=new Vue({
	el:'#app',
	data:{
		arr:["关羽","刘备","张飞","庞统","李白"],
		per:{
			name:"小强",
			age:18,
			gender:"男",
			location:"善知教育"
		}
	}
});

一些其他指令的使用

mustache语法是一种模板语法 在vue未加载到该语法代码时，则该语法看起来像是乱码一样，只有vue挂载成功了以后才真正加载。
假设当前网速缓慢，比如下面代码我们用 setTimeout模拟网速缓慢，那么页面加载时会优先显示一个 花括号{{}}，这样给用户的带来非常不好的体验。

那么针对这种mustache语法使用时先加载 花括号{{}}，再加载内容的方式该如何处理呢?
vue官方推出了一个v-cloak 指令：该指令的作用就是保证了 mustache语法在未加载出来之前并不显示，直到语法加载成功后才显示，但是需要css配合: [v-cloak]{display:none;}。
实现原理:
在当前标签使用了 v-cloak以后那么如果mustache语法未加载时则标签具有该属性，跟css属性选择器配合 导致元素不显示，直到mustache语法的值加载成功，则自动删除该属性元素就显示出来了。

<div id="app">
    <h1 v-cloak>{{msg}}</h1>
    <h1 v-html="str2">我是默认内容</h1>
    <h1 v-text="str2">我也是默认内容</h1>
</div>

setTimeout(()=>{
	var vm=new Vue({
		el:'#app',
		data:{
			msg:"HelloWorld!",
			str1:"我是str1的内容",
			str2:"<a href='http://www.baidu.com'>我是a标签</a>"
		}
	});
},2000)

v-html="变量或者表达式"；
v-text="变量或者表达式"；
这两个指令都是能够把 变量或者表达式的值 作为当前标签的内部内容来渲染，如果标签原本内部有内容则覆盖。
这两个指令的区别就是：如果内容中有标签 那么v-html可以渲染标签，v-text不可以渲染标签只会把内容原封不动渲染到页面上。
这两个指令也具有 渲染成功后才显示的效果，所以有些地方如果要渲染一些变量内容也可以使用该指令。

v-model指令的使用：

v-model指令：是专门用在输入框上面用来替代输入框的value属性，让输入框的value可以关联一个vue的变量，从而实现双向数据绑定

格式: <input type="text" v-model="变量"> 要注意: 一旦输入框使用了v-model 那么就不要再定义 value属性，因为v-model就代替value属性。
效果:
一旦用户修改输入的内容则对应的变量会发生值的改变，如果其他地方也用到了该内容，则也会发生改变。
可以使用v-model的标签:input，textarea标签。

<div id="app">
    <input type="text" v-model="msg">
    <textarea v-model="msg" id="" cols="30" rows="10"></textarea>
    <h1>{{msg}}</h1>
    <h1 v-html="msg"></h1>
</div>

var vm=new Vue({
	el:'#app',
	data:{
		msg:"HelloWorld!"
	}
});

template模板标签的使用

如果我们的指令想要控制的标签元素（一堆标签）不是单个标签，那么之前的做法是再添加一个父元素标签然后把指令定义到统一的父元素标签上面去。

无论是 `v-if` 还是`v-for` 还是`v-show`都是这样做的，但是如果实际开发的需求不允许我们再添加一个父元素标签了呢?

所以我们需要用到vue中的template标签。
该标签是H5推出的标签但是Vue中重新定义了它的功能，在vue中template标签不渲染，也就是说我们可以写指令控制template里面的元素，但是template本身又不渲染到页面上。
所以如果以后有想要控制多个元素的情况下可以考虑使用template标签
但是 template标签不能使用v-show指令!!!
v-if和template配合使用可以实现分组管理

<!--<template>我是template标签</template>-->
<div id="app">
      <!--<div v-for="(item,index) in arr">
          <div>{{item}}:我是第一个div</div>
          <div>{{item}}:我是第二个div</div>
          <div>{{item}}:我是第三个div</div>
      </div>    -->
   <!--<template v-for="(item,index) in arr">
       <div>{{item}}:我是第一个div</div>
       <div>{{item}}:我是第二个div</div>
       <div>{{item}}:我是第三个div</div>
   </template>-->
    <template v-if="boo">
        <div>我是一个div</div>
        <div>我也是</div>
    </template>
    <template v-else>
        <ul>
            <li>我是一个li</li>
            <li>我也是li</li>
        </ul>
    </template>
</div>

var vm=new Vue({
	el:'#app',
	data:{
		arr:["小明","小红","大婷"],
		boo:true
	}
});

v-on绑定事件的指令使用

vue中使用v-on指令来绑定事件:
格式: <标签 v-on:不带on的事件类型="事件方法名"></标签>
暂时不需要事件对象时驱动函数名可以不加括号

该事件要在Vue的json里面定义：

methods:{
	驱动函数名:function(){}
}

v-on指令使用时开发工具会提示添加命名空间：
xmlns:v-on="http://www.w3.org/1999/xhtml" 没啥用添不添加都行，不影响运行。

如果实在看不过去我们v-on有简化写法：<标签 @不带on的事件名称="事件驱动函数名"></标签>
在事件的驱动函数里面通过this可以直接访问data里面的变量
要注意: this.不能省略

var vm=new Vue({
	el:'#app',
	data:{
		msg:"我是默认内容"
	},
	methods:{
		show:function(){
			alert("你点我干嘛")
		},
		show1:function(){
			console.log("鼠标移入了");
		},
		getData(){
		  // console.log(this.msg);
		   this.msg="哈哈,新内容吧";
		}
	}
});

//补充: es6中 json对象绑定方法 可以向下面这样去写
var per={
	name:"小强",
	//es6的新写法
	show(){
		console.log("我是show方法");
	}
}
per.show()
class Person{
	sayHi(){
	}
}

vue事件中的event使用

vue中的event事件对象需要在绑定事件的标签上面传入$event参数。
格式: <标签 @事件名称="事件驱动函数($evnet)"> </标签>
$event是固定写法必须这么写，然后在事件驱动函数里面第一个参数接收event。event属性跟原来学习的没有任何差别。
如果标签上面绑定事件时没有传入$event 那么事件驱动函数也无法接收event
几种情况:

不需要event事件对象而是传入自定义数据
<li v-for="(item,index) in arr" @click="getData(item,index)">{{item}}</li>
标签上面传入几个参数，那么事件驱动函数就可以用形参去接受。
如果需要event对象还需要传入数据那么必须保证$event是在第一个参数位置:
<li v-for="(item,index) in arr" @click="getData1($event,item,index)">{{item}}</li>。

<div id="app">
<!--   <div id="box" @click="show($event)"></div>-->
   <div id="box" @click="show($event)"></div>
    <ul>
	<!--不使用event对象的情况下传入参数-->
        <li v-for="(item,index) in arr" @click="getData(item,index)">{{item}}</li>
    </ul>
    <ol>
	<!--如果有event也有其他数据 那么必须保证 $event在第一位-->
        <li v-for="(item,index) in arr" @click="getData1($event,item,index)">{{item}}</li>
    </ol>
</div>

var vm=new Vue({
	el:'#app',
	data:{
		msg:"HelloWorld!",
		arr:["关羽","刘备","张飞","袁绍","庞统"]
	},
	methods:{
		show(event){
			console.log(event);
		},
		getData(s,i){
			// console.log(s,i);
			this.arr.splice(i,1);
		},
		getData1(event,item,index){
			console.log(event,item+"---"+index);
		}
	}
});

vue中的事件修饰符

vue中阻止事件冒泡不用event对象直接使用事件修饰符即可

格式: <标签 @事件名称.修饰符="驱动函数"></标签>
修饰符有:
stop: 阻止事件冒泡
prevent: 阻止默认事件
once: 该事件只能触发一次
self: 只有event.target===this的时候才触发该事件

<div id="app">
<!--<div id="box" @contextmenu.prevent="demo" @click.once="boxclick($event)">-->
    <div id
                        
                        
                            
                            版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

                            原文链接：https://blog.csdn.net/qq_40041509/article/details/109438812

                            站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
                        
                        
                        
                            
                                
                                    
                                    发表于 2021-06-14 21:50:32
                                
                                阅读 ( 735 )
                                分类：前端