前端框架Vue概述，特点，安装，helloWorld，模板语法，指令，组件
Vue
什么是Vue.js?
Vue(读音 /vjuː/，类似于 view())是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是Vue被设计为可以自底向上逐层应用。Vue的核心库之关心视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue.js是前端的主流框架之一，和Angular.js，React.js,并成为前端三大主流框架
Vue.js优点
1.体积小，压缩后33kb
2.更高的运行效率
用JQuery或者原生的JavaScript DOM 操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非诚卡顿。
基于虚拟 dom，一种可以预先通过 JavaScript 进行各种计算，把最终的 DOM 操作计算出来并优化的技术，由于这个 DOM 操作属于预处理操作，并没 有真实的操作 DOM，所以叫做虚拟 DOM.最后在计算完毕才真正将 DOM 操作 提交，将 DOM 操作变化反映到 DOM 树上。
3.双向数据绑定，简化Dom操作
通过MVVM思想实现数据的双向绑定，让开发者不用再操作Dom对象，把更多的经历投入到业务逻辑上
4.生态丰富，学习成本低
市场上有大量成熟的，稳定的基于vue.js的ui框架，常用组件！ 即拿即用快速开发！对初学者友好，入门容易，学习资料多
Vue安装
方式一：直接用
下载 Vue.js 并导入 js 文件
方式 2:命令行工具 (CLI)
安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。
第一个Vue demo
-
导入开发版本的 Vue.js
-
创建 Vue 实例对象，设置 el 属性和 data 属性
-
使用简洁的模板语法把数据渲染到页面上 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
一个vue样例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}, <!-- {{ 数据 }} 插值表达式 模板语法-->
<p>{{age 10>20?"成年人":"青年"}}</p>
{{users.name}} {{users.age}}
{{city}}
</div>
<script type="text/javascript">
/* new Vue() 创建vue对象 ViewModel*/
var app = new Vue({
el:"#app", //数据挂载点
data:{ //数据
message:"hello vue !!!",
age:20,
users:{name:'jim',age:20},
city:['西安','汉中']
}
});
</script>
</body>
</html>
结果：
代码解析：
{{变量}}模板语法插值表达式获取数据
new Vue();创建 Vue 对象(VM 对象)
el:数据挂载的 dom 对象
Vue会管理el选项命中的元素及其元素的后代元素
可以使用其他的选择器，但是建议使用 ID 选择器
可以使用其他的闭合标签，不能使用 HTML 和 BODY
data:{ message:’hello world’} model 数据
Vue中用到的数据定义在data中
data中可以写复杂类型的数据，如对象，数组
渲染复杂类型数据时，遵循js语法即可
模板语法
Vue.js使用了基于HTMl的 模板语法，允许开发者声明式的将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和Html解析器解析。
在在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
插值文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
Message: {{ msg }}
Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时， 绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
使用 JavaScript 表达式迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实 际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript表达式支持。
{{ number 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
{{ message.split(’’).reverse().join(’’) }}
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个 限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
{{ var a = 1 }}
{{ if (ok) { return message } }}
Vue指令
指令带有v-开头以表示它们是Vue提供的特殊属性。
v-text
作用是设置标签的文本内容
默认写法会替换全部内容，使用差值表达式可以替换指定内容
内部支持写表达式
v-html
作用是设置元素的 innerHTML
内容中有 html 结构会被解析为标签
内部支持写表达式
</head>
<body>
<div id="app">
<!--
<span>{{message}} aaaaaa</span> 只是插入值,不会覆盖整个标签的内容,不能解析标签
<span v-text="message">bbbbb</span> 不能解析标签 会覆盖掉标签中的内容
<span v-html="message">ccccc</span> 能解析标签 会覆盖掉标签中的内容
-->
<span>{{message}} aaaaaa</span>
<span v-text="message">bbbbb</span>
<span v-html="message">ccccc</span>
</div>
<script type="text/javascript">
/* new Vue() 创建vue对象 ViewModel*/
var app = new Vue({
el:"#app",
data:{
message:“hello vue !!!”
}
});
</body>
结果：
v-on
作用是为元素绑定事件
事件名不需要写 on 指令可以简写为@
绑定的方法定义在 methods 属性中,可以传入自定义参数
<input type=“button” value=“按钮” @click=“test” />
methods:{
test(a,b){
alert(a);
}
}
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="按钮1" v-on:click="test(1,2)" />
<input type="button" value="按钮2" @dblclick="test1(1,2)" />
</div>
<script type="text/javascript">
/* new Vue() 创建vue对象 ViewModel*/
var app = new Vue({
el:"#app",
data:{
message:"<b>hello vue !!!</b>"
},
methods:{//定义函数
test(a,b){
alert("aaaaaaaa" a ":" b);
},
test1(a,b){
alert("aaaaaaaa" a ":" b);
}
}
});
</script>
</body>
</html>
结果：
v-model
作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值 双向数据绑定
{{message}}
data:{message:""
}
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model="account" 可以将 表单元素的值 与 vue数据进行双向绑定 -->
<input type="text" value="" v-model="account"/>
<input type="text" value="" v-model="password"/>
<p v-text="account"></p>
<input type="button" value="测试" @click="test()" />
</div>
<script type="text/javascript">
/* new Vue() 创建vue对象 ViewModel*/
var app = new Vue({
el:"#app",
data:{
account:"",
password:""
},
methods:{
test(){
this.account = "123456";
}
}
});
</script>
</body>
</html>
v-show
作用是根据真假切换元素的显示状态 原理是修改元素的 display，实现显示隐藏 指令后面的内容，最终都会解析为布尔值 值为 true 元素显示，值为 false 元素隐藏 数据改变之后，对应元素的显示状态会同步更新
data:{
isShow:true,
age:20
}
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="按钮1" v-show="isshow" />
<input type="button" value="按钮2" v-show="num>18"/>
</div>
<script type="text/javascript">
/* new Vue() 创建vue对象 ViewModel*/
var app = new Vue({
el:"#app",
data:{
isshow:false,
num:10
}
});
</script>
</body>
</html>
结果：
v-if
作用是根据表达式的真假切换元素的显示状态 本质是通过操纵 dom 元素来切换 显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除 频繁的切换 v-show，反之使用 v-if，前者的切换消耗小
主要是和v-show区别
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--
v-show 控制标签显示 隐藏 是通过控制css display属性实现的 不会删除标签的
v-if 控制标签显示 隐藏 是直接操作dom 隐藏就直接从dom中删除标签
-->
<input type="button" value="按钮1" v-if="isshow" />
<input type="button" value="按钮2" v-if="num>18"/>
<input type="button" value="按钮3" v-else />
</div>
<script type="text/javascript">
/* new Vue() 创建vue对象 ViewModel*/
var app = new Vue({
el:"#app",
data:{
isshow:true,
num:10
}
});
</script>
</body>
</html>
结果：
v-bind
作用是为元素绑定属性 完整写法是 v-bind：属性名 简写的话可以直接省略 v-bind，只保留：属性名
data:{
imgSrc:‘img/3.jpg’ imgTitle:“这是一张图片”
}
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--
v-model 把表单标签的"值" 绑定给某个vue数据
v-bind 为标签属性 绑定数据
-->
<p v-bind:align="a">qqqqq</p>
<p :align="a">qqqqq</p>
<input type="button" value="测试" @click="test()" />
</div>
<script type="text/javascript">
/* new Vue() 创建vue对象 ViewModel*/
var app = new Vue({
el:"#app",
data:{
a:"center"
},
methods:{
test(){
this.a = "right";
}
}
});
</script>
</body>
</html>
结果：
v-for
作用是根据数据生成列表结构
数组经常和 v-for 结合
使用语法是（item，index）in 数据 item 和 index 可以结合其他指令一起使用 数组长度的更新会同步到页面上是响应式的 为循环绑定一个 key 值 :key=”值” 尽可能唯一
-
{{item}}省
-
{{index 1}}{{item}}省
-
{{index 1}}{{item.name}}{{item.age}}
data:{
array:[‘陕西’,‘山西’,‘河南’],
objects:[
{name:‘admin’,age:23},
{name:‘jim’,age:22}
]
}
代码实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <table border="1"> <tr v-for="(user,index) in users" :key="index"> <td>{{index 1}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> </tr> </table> </div> <script type="text/javascript"> /* new Vue() 创建vue对象 ViewModel*/ var app = new Vue({ el:"#app", data:{ users:[] }, methods:{//z自定义函数 }, //下面的是VUE生命周期钩子函数 在每个生命周期阶段 会提供一个函数,让我们去执行一些操作 beforeCreate() { console.log("beforeCreate") }, created() { console.log("created") //页面加载 vue对象被创建后, 向后端自动发送请求 this.users = [ {name:'jim1',age:20}, {name:'jim2',age:20}, {name:'jim3',age:20}, {name:'jim4',age:20}, ]; }, beforeMount() { console.log("beforeMount") }, mounted() { console.log("mounted") } }); </script> </body> </html>结果：
Vue生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数 据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时 在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添 加自己的代码的机会。
Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。
1、beforeCreate（创建前）
表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。
2、created（创建后）
数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。
3、beforeMount（挂载前）
vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。
4、mounted（挂载后）
vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。
5、beforeUpdate（更新前）
当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。
6、updated（更新后）
当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。
7、beforeDestory（销毁前）
组件销毁之前调用 ，在这一步，实例仍然完全可用。
8、destoryed（销毁后）
组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。
Vue组件
组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，且带有一个名字
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任何类型的应用界面都可以抽象成为一个组件树：
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组 件的注册类型：全局注册和局部注册。至此，我们的组件都只是通 过 Vue.component 全局注册的：
定义组件:
Vue.component(‘组件名’, {template: ‘模板内容’ });
一级标题{{msg}}
Vue.component(‘组件名’, {template: ‘#id 名’ });
组件中的数据export default {
data: function () {
return {
count:0,
msg:“组件数据”
}
}
}
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象 的独立的拷贝
组件应用代码实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <mycom></mycom> <mycom></mycom> <mycom></mycom> </div> <!-- 自定义组件 以到达重复使用 后面组件可以是一个页面--> <template id="h1id"> <h1 @click="test()">一级标题,重复使用 {{mycom_name}}</h1> </template> <script type="text/javascript"> /* 注册全局组件 组件名*/ Vue.component("mycom", { template:"#h1id",//为组件绑定标签 data:function (){//组件中的数据定义 return{ mycom_name:"jim" } }, methods:{ test(){ alert("组件中的事件"); } } }) new Vue({ el:"#app", data:{ } }) </script> </body> </html>结果：
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhggfchh
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13
