HTML 教程 | 菜鸟教程HTML 教程- (HTML5 标准) 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。 在本教程中,您将学习如何使用 HTML 来创建站点。 HTML 很容易学习!相信您能很快学会它! HTML 实例 本教程包含了数百个 HTML 实例。 使用本站的编辑器,您可..https://www.runoob.com/html/html-tutorial.htmlCSS 教程 | 菜鸟教程CSS 教程 通过使用 CSS 我们可以大大提升网页开发的工作效率! 在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局。 各章节实例 本 CSS 教程包含了数百个CSS在线实例 通过本站的在线编辑器,你可以在线编辑CSS,并且可以在线查看修改后的效果。 CSS 实例 [mycode3 type='css'] body { background-color:#d0e..https://www.runoob.com/css/css-tutorial.htmlJavaScript 教程 | 菜鸟教程JavaScript 教程 JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都使用 JavaScript。 JavaScript 非常容易学。 本教程将教你学习从初级到高级 JavaScript 知识。 JavaScript 在线实例 本教程包含了大量的 JavaScript 实例, 您可以点击 '尝试一下' 来在线查看实例。 实例 function displayDate..https://www.runoob.com/js/js-tutorial.html

Vue

Vue是我们国人开发的,作者:尤雨溪,是一个基于JavaScript的渐进式前端框架,更符合中国人习惯,在中国很多大型一线企业中广泛应用。

Vue3.0使用TypeScript编写,TypeScript是JavaScript的超集,微软研发,语法更加细致严谨,改js脚本语言为向一线强语言java、c靠拢,可以构建大型项目,基于ES6标准。
 

下载

https://cn.vuejs.org/    官网

 https://cdn.jsdelivr.net/npm/vue/dist/vue.js    下载最新版本

特点

一个轻量级的mvvm框架,双向绑定,数据动态更新,gzip后大小只有20k+
是一个渐进式框架,其核心思想是数据驱动、组件化的前端开发
原生html页面是通过js 操作的是dom,而vue.js操作的是数据。
和传统前端开发开发的关注点完全不同,传统方式关注的是都像的document结构的api,而vue关注的是数据。
优点显而易见,从而屏蔽了使用复杂晦涩难记的dom结构api。

Vue是一个渐进式框架

Vue是一个用于构建用户界面的渐进式 SPA ( Single-Page Applications )**单一页面框架。与其它庞大而单一框架不同的是,Vue从一开始就被设计为按需搭建。

可以只使用核心vue.js
可以只使用核心vue.js + components组件
可以只使用核心vue.js + components组件 + router路由
可以只使用核心vue.js + components组件 + router路由 + vuex状态管理
构建大型vue项目:npm(包依赖) + webpack(打包、压缩、合并等)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue</title>
		<!-- 1. 引入vue.js -->
		<script src="vue.js"></script>
		
	</head>
	<body>
		<!-- 2. 准备数据渲染区 ,{{ 插值表达式 }}-->
		<div id="app">{{msg}}</div>
		<script>
			<!-- 3. 创建Vue对象 -->
			
				new Vue({
					el : "#app" ,
					data : {
						msg : "hello vueeee~~~"
					}
				});
		
		</script>

	</body>
</html>

MVVM框架

Vue采用了最新的MVVM框架,它最大的特点就是:传统js机制操作的是页面,如我们之前写的html+css+js案例,大家会发现页面和页面里的数据混杂在一起。

而MVVM框架体系引入后端早已深入人心的分层思想,是后端MVC框架的延伸,实现把数据和页面分离。我们可以在页面布局好后,只对数据进行操作,当数据改变,页面上的内容会自动随之改变,而无需开发者开发专门的代码去改变,如之前ajax技术实现的局部刷新。

简而言之,MVVM框架实现了页面和数据的分离,代码结构更加清晰,责任更加明确,同时实现自动化,数据变化,页面随之变化,无需写代码,非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的,也是前端为何开始推崇Vue这些框架的根本原因,也标示着jquery的终结。
 

Vue运算符

<body>
		<div id="app">
			<p> 加法:{{2+3}} </p>
			<p> 减法:{{2-3}} </p>
			<p> 乘法:{{2*3}} </p>
			<p> 除法:{{3/2}} </p>
			<p> 取余:{{10%2}} </p>
            <p> 有个bug:{{sum++}}</p> //结果是101    自增自减会运算101次vue的bug,运算用js
		 
			<p> 三元表达式: {{age>10?'yes':'no'}}</p>
			<p> 字符串操作: </p>
<p> {{str}} {{str.length}} {{str.concat(1000)}} {{str.substr(3)}}  </p>
		
		</div>

		<script>
			
				new Vue({
					el:"#app",
					data:{
						str:"hellovue~",
						age:12
                        sum:0
					}
				});
		
		</script>

 Vue方法methods

<body>
		<div id="app">
			<!-- vue的事件,使用v-on调用指定函数 -->
			按钮1:<button onclick="alert(100)">点我</button>
			按钮2:<button v-on:click="show()">点我</button>
			<h2>  vue调用无参函数:{{ show() }}  </h2>
			<h3>  vue调用含参函数:{{ sysout(100) }}  </h3>	
		</div>
		<script>
		
				new Vue({
					el:"#app",
					data:{
						address:"北京",
						name:"张三",
						age:20,
						person:{
							name:"jack",
							age:18,
							salary:1100
						},
						hobby:["唱","跳","rap"],
						url:"https://act.codeboy.com/"
					},
					methods: { /* 必须在methods里,创建Vue函数 */
						show:function(){ 
							console.log('hello vue');
						},
						sysout: function(color){
							console.log(color);
						}
					}
				});
		
		</script>

	</body>

Vue解析数据

<body>
		<div id="app"> 
			<h1>
				vue解析变量:{{str}} {{str.length}} 
				{{str.replace('l','666')}} {{str.concat(123)}}
				{{num}}  {{num+10}} {{num/3}} {{num%4}}
				{{num>5?1:0}} 	{{num--}}
			</h1>
			<h2>vue解析对象:{{p.name}} {{p.age}} </h2>
			<h2>vue解析数组:{{arrays[1].name}} {{arrays[0].age}} </h2>
			
			<h2>vue调用函数的语法:{{sout()}} </h2>
			<button v-on:click="add(1,2)">点我</button>
			<button @click="add(1,2)">点我</button>
		</div>
		<script>
			var vm = new Vue({
				el:"#app", //数据挂载点
				data:{
					str:"hello vue",
					num:10,
					p:{//vue定义对象
						name:"lisi",
						age:20
					},
					arrays:[//vue定义数组
						{
							name:"zhangsan",
							age:20
						},
						{
							name:"wangwu",
							age:30
						}
					]
				},
				methods:{//vue定义方法
					sout:function(){
						console.log(100);
					},
					add:function(a,b){ //含参方法
						console.log(a+b);
					}
				}
			})
		</script>
	</body>

data值的三种写法

<body>
		<div id="app">{{msg}}</div>
		<script>
		
				new Vue({
					el : "#app" ,
					// 数据的三种写法:标准写法
					// 第一种形式
					// data : {
					// 	msg : "hello vueeee~~~"
					// }
					// 第二种形式:定义函数,返回对象
					// data:function(){
					// 	return {
					// 		msg:"hi~vue"
					// 	}
					// },
					// 第三种形式:定义函数,es6的简写法(常用)
					data(){
						return {
							msg:"vue hi~"
						}
					}
				});
	
		</script>
	</body>

高级用法:v-命令



指令集

指令是带有 v- 前缀的特殊属性,以表示它们是 Vue 提供的特殊特性。

指令用于在表达式的值改变时,将某些行为应用到 DOM 上。

常见的Vue指令:v-if v-for v-on v-bind v-model v-cloak等

v-model:双向绑定

通过指令v-model,实现双向绑定,修改一方同时修改相同的另一方,达到数据同时更新。MVVM是将"数据模型双向绑定"的思想作为核心,在View和Model之间没有联系,通过ViewModel进行交互,而且Model和ViewModel之间的交互是双向的,因此View视图的数据的变化会同时修改Model数据源,而Model数据源数据的变化也会立即反应到View视图上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试v-model</title>
        <!--导入vue文件-->
		<script src="../js/vue.js"></script>
	</head>
	<body>
			<h1>{{address}}</h1>
		<div id="app">               //数据渲染区,使用id=“app”
			<h2>{{address}}</h2>
			<h3>{{address}}</h3>
			<h4>{{address}}</h4>
			<h5>{{address}}</h5>
			<h6>{{address}}</h6>
			
			<input type="text" v-model="address"/>  //text文本框,进行双向绑定address
		</div>
	</body>
	<script>
		let vm = new Vue({
			el: "#app",                   //选择id=“app”
			data: {
				address: "北京天安门"      //设置address的初始值
			}
		});
	</script>
</html>

v-if:判断指令,可以控制是否调用

<div id="app">
			<div v-if="age>=18">成年人</div>
			<div v-if="age<18">未成年人</div>
			<input type="text" v-model="score" />
			<div v-if="score>=60&score<=100">优秀</div>
			<div v-else-if="score<60&score>=0">不及格</div>
			<div v-else>数据有误</div>
		</div>
		<script>
			new Vue({
				el:"#app",
				data(){
					return{
						age:19,
						score:10
					}
				}
			})
		</script>

v-for:循环

<script>
			window.onload=function(){
				new Vue({
					el:"#app",
					data:{
						address:"北京",
						name:"张三",
						age:20,
						person:{
							name:"jack",
							age:18,
							salary:1100
						},
						hobby:["唱","跳","rap"],
						url:"https://act.codeboy.com/"
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="app">
			<p>地址:{{address}}</p>
			<p>姓名:{{name}}</p>
			<p>年龄:{{age}}</p>
			<p>爱好:{{hobby}} , 个数:{{hobby.length}}</p>
			<p>数组的第一个元素:{{hobby[0]}} </p>
			<p>数组的第最后一个元素:{{hobby[2]}} </p>
			
		<!-- 数组的遍历:类似于java里的foreach循环,o表示每次获取到的数据 -->
			<p v-for="o in hobby">{{o}}</p>
			<!-- o是数据,i是下标 -->
			<p v-for="o,i in hobby">下标是:{{i}}---数据是:{{o}}</p>
			<p v-for="(o,i) in hobby">下标是:{{i}}---数据是:{{o}}</p>
		</div>
	</body

v-on:调用事件

<body>
		<div id="app">
			<p>{{count}}</p>
			<button @click="count++">点我</button>
			
			<button onclick="show()">javascript 点我</button>
			<button v-on:click="show()">v-on:click 点我</button>
			<button @click="show()">简写的事件,点我</button>
		</div>
	</body>
	<script>
		function show(){
			alert("old show");
		}
		new Vue({
			el: "#app",
			data:{
				msg : "hello vue",
				count:1
			},
			methods:{
				show : function(){
					console.log(this.msg)
				}
			}
		})
	</script>

v-bind:绑定
 

<body>
		<div id="app">
			<a href="http://act.codeboy.com">java培优</a>
			<a v-bind:href="url" target="_blank">{{urlname}}</a>
			<a :href="url" target="_blank">{{urlname}}</a>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data:{
				name: "tony",
				url: "http://act.codeboy.com",
				urlname: "达内java培优"
			}
		})
	</script>

小结
可以看到Vue这类为何称为框架,名副其实,当之无愧。写javaScript时,我们要先去学习其复杂的api(document.getElementById()),写jQuery时,又学一套复杂的api(一堆的选择器),特别它的写法虽然简洁,却晦涩难懂,需要死记大量英文单词,初学者极易写错,门槛很高,而Vue框架结构搭建好,就剩下修改数据和展示数据,而其结构非常简单,一看就会,如调用信息{undefined{message}}


 

Logo

前往低代码交流专区

更多推荐