黑马程序员Vuejs快速入门.docx
- 文档编号：16865097
- 上传时间：2023-07-19
- 格式：DOCX
- 页数：11
- 大小：194.81KB
黑马程序员Vuejs快速入门.docx
《黑马程序员Vuejs快速入门.docx》由会员分享，可在线阅读，更多相关《黑马程序员Vuejs快速入门.docx（11页珍藏版）》请在冰点文库上搜索。
黑马程序员Vuejs快速入门
黑马程序员：
Vue.js快速入门
Vue.js简介
了解Vue.js
Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。
Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件，它不仅易于上手，还便于与第三方库或既有项目整合.
Vue.js安装
下载Vue.js:
（我们现在使用的版本是2.5.16）
快速入门
声明式渲染
我们现在做个最简单的小例子，演示如何使用Vue.js实现声明式渲染。
创建Vue_1.html，将Vue.js资料包下的dist目录的vue.min.js拷贝到工程中，并在html页面中引入
DOCTYPEhtml>
{{message}}
varmyVue=newVue（{
el:
"#myVue",
data:
{
message:
"HelloWorld"
}
}）;
分析：
{{message}}:
表示view。
newVue（）：
表示创建Vue对象，用于连接view和model。
el:
表示指向view。
data：
表示指向model。
通过Vue对象连接view和model，{{message}}就可以获取到Vue对象中data定义的message的内容。
运行结果如下：
绑定元素特性
Vue.js除了声明式渲染之外，还可以进行绑定元素的特性：
创建Vue_2.html
DOCTYPEhtml>
title="message"> 传智播客
varmyVue=newVue（{
el:
"#myVue",
data:
{
message:
""
}
}）;
分析：
v-bind:
称为指令,将这个元素节点的title特性和Vue实例的message属性保持一致
运行结果如下：
双向绑定示例
我们刚才的例子非常简单，咱们再来看一下Vue.js双向数据绑定的使用：
创建Vue_3.html
DOCTYPEhtml>
Messageis:
{{message}}
varmyVue=newVue（{
el:
"#myVue",
data:
{
message:
""
}
}）;
分析：
v-model:
指令，监听用户的输入事件以更新数据。
运行结果如下：
按钮事件绑定
Vue.js可以用v-on指令监听标签的事件，并在触发时运行JavaScript代码。
创建Vue_4.html
DOCTYPEhtml>
click="show"type="button"value="点击">
varmyVue=newVue（{
el:
"#myVue",
data:
{
message:
"欢迎来到传智播客！
"
},
methods:
{
show:
function（event）{
alert（this.message）;
}
}
}）;
分析：
v-on:
指令。
v-on:
click:
设置监听input的点击事件的事件。
methods:
定义v-on:
click的方法。
event：
表示标签的原生事件
this.message:
表示指向Vue对象中定义的message。
运行结果如下：
遍历集合数据
我们可以使用Vue.js的v-for指令对数组或者集合的数据进行遍历展示。
创建Vue_5.html
DOCTYPEhtml>
varvue=newVue（{
el:
"#myVue",
data:
{
products:
[
{
id:
1001,
name:
"数码相机",
price:
3000
},
{
id:
1002,
name:
"苹果手机",
price:
7000
}
]
}
}）;
分析：
v-for="（product,index）inproducts"：
v-for为Vue指令，用于遍历集合，其基本语法为“iteminitems”。
products为要遍历的集合。
（product,index）中的product用于存放遍历集合的元素，index用于存放集合元素的角标，从0开始。
在Vue对象的data属性中，通过products[{}]的形式设置集合的数据。
运行结果如下：
路由操作vue-router下载
Vue.js想要实现路由效果，需要和vue-router进行组合实现，在Vue.js中并没有关于vue-router的js文件，所以vue-router需要单独去下载，另外需要注意的是Vue.js+vue-router实现的路由操作是但页面的路由操作。
下载vue-router:
路由实现
创建Vue_6.html,引入vue.min.js和vue-router.min.js文件
DOCTYPEhtml>
《财政学》期末习题.docx
