HTML 教程 | 菜鸟教程HTML 教程- (HTML5 标准) 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 在本教程中，您将学习如何使用 HTML 来创建站点。 HTML 很容易学习！相信您能很快学会它！ HTML 实例 本教程包含了数百个 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}}
2651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
