前端三剑客，html，css，javascript，vue框架-JieYingAI捷鹰AI

HTML 教程 | 菜鸟教程HTML 教程- (HTML5 标准) 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。在本教程中，您将学习如何使用 HTML 来创建站点。 HTML 很容易学习！相信您能很快学会它！ HTML 实例本教程包含了数百个 HTML 实例。使用本站的编辑器，您可..

CSS 教程 | 菜鸟教程CSS 教程通过使用 CSS 我们可以大大提升网页开发的工作效率！在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。各章节实例本 CSS 教程包含了数百个CSS在线实例通过本站的在线编辑器，你可以在线编辑CSS,并且可以在线查看修改后的效果。 CSS 实例 [mycode3 type='css'] body { background-color:#d0e..

Vue

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

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

下载

官网

下载最新版本

特点

一个轻量级的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（打包、压缩、合并等）



	
		
		vue
		
		
		
	
	
		{ 插值表达式 }}-->
		{{msg}}
		
			
			
				new Vue({
					el : "#app" ,
					data : {
						msg : "hello vueeee~~~"
					}
				});

MVVM框架

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

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

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

Vue运算符


		
			 加法:{{2+3}} 
			 减法:{{2-3}} 
			 乘法:{{2*3}} 
			 除法:{{3/2}} 
			 取余:{{10%2}} 
             有个bug:{{sum++}} //结果是101    自增自减会运算101次vue的bug，运算用js
		 
			 三元表达式: {{age>10?'yes':'no'}}
			 字符串操作: 
 {{str}} {{str.length}} {{str.concat(1000)}} {{str.substr(3)}}  
		
		
		
			
				new Vue({
					el:"#app",
					data:{
						str:"hellovue~",
						age:12
                        sum:0
					}
				});

Vue方法methods


		
			
			按钮1:
			按钮2:
			  vue调用无参函数：{{ show() }}  
			  vue调用含参函数：{{ sysout(100) }}  	
		
		
		
				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);
						}
					}
				});

Vue解析数据


		 
			
				vue解析变量：{{str}} {{str.length}} 
				{{str.replace('l','666')}} {{str.concat(123)}}
				{{num}}  {{num+10}} {{num/3}} {{num%4}}
				{{num>5?1:0}} 	{{num--}}
			
			vue解析对象：{{p.name}} {{p.age}} 
			vue解析数组：{{arrays[1].name}} {{arrays[0].age}} 
			
			vue调用函数的语法:{{sout()}} 
			
			
		
		
			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);
					}
				}
			})

data值的三种写法


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

高级用法：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视图上。



	
		
		测试v-model
        
		
	
	
			{{address}}
		               //数据渲染区，使用id=“app”
			{{address}}
			{{address}}
			{{address}}
			{{address}}
			{{address}}
			
			  //text文本框，进行双向绑定address
		
	
	
		let vm = new Vue({
			el: "#app",                   //选择id=“app”
			data: {
				address: "北京天安门"      //设置address的初始值
			}
		});

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


			=18">成年人
			<div v-if="age未成年人
			
			=60&score优秀
			<div v-else-if="score=0">不及格


			数据有误

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