前端框架-Vue 入门
一、介绍
1、Vue.js 是什么
2、初始Vue.js
<!-- id标识vue作用的范围 -->
<div id="app">
<!-- {{}} 插值表达式,绑定vue中的data数据 -->
{{ message }}
</div>
<script src="vue.min.js"></script>
<script>
// 创建一个vue对象
var app = new Vue({
el: '#app',//绑定vue作用的范围
data: {//定义页面中显示的模型数据
message: 'Hello Vue!'
}
})
</script>
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" var app = new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}
二、基本语法
1、基本数据渲染和指令
data: {
content: '我是标题',
message: '页面加载于 ' + new Date().toLocaleString()
}
<!-- 如果要将模型数据绑定在html属性中,则使用 v-bind 指令
此时title中显示的是模型数据
-->
<h1 v-bind:title="message">
{{content}}
</h1>
<!-- v-bind 指令的简写形式: 冒号(:) -->
<h1 :title="message">
{{content}}
</h1>
2、双向数据绑定
data: {
searchMap:{
keyWord: '尚硅谷'
}
}
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是:{{searchMap.keyWord}}</p>
3、事件
data: {
searchMap:{
keyWord: '尚硅谷'
},
//查询结果
result: {}
},
methods:{
search(){
console.log('search')
//TODO
}
}
<!-- v-on 指令绑定事件,click指定绑定的事件类型,事件发生时调用vue中methods节点中定义的方法 -->
<button v-on:click="search()">查询</button>
<p>您要查询的是:{{searchMap.keyWord}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
{
"items":[
{
"title":"尚硅谷",
"site":"http://www.atguigu.com"
},
{
"title":"百度",
"site":"http://www.baidu.com"
}
]
}
<script src="jquery.min.js"></script>
search(){
console.log('search')
$.get('mock/company.json', data => {
data.items.forEach(company => {
console.log(company)
if(company.title === this.searchMap.keyWord){
this.result = company
}
})
})
}
<!-- v-on 指令的简写形式 @ -->
<button v-on:click="search()">查询</button>
<div id="app">
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord"> <!-- v-on 指令绑定事件,click指定绑定的事件类型,事件发生时调用vue中methods节点中定义的方法 -->
<button v-on:click="search()">查询</button>
<p>您要查询的是:{{searchMap.keyWord}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
</div>
<script src="vue.min.js"></script>
<script src="jquery.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
searchMap:{
keyWord: '尚硅谷'
},
//查询结果
result: {}
},
methods:{
search(){
console.log('search')
$.get('mock/company.json', data => {
data.items.forEach(company => {
console.log(company)
if(company.title === this.searchMap.keyWord){
this.result = company
}
})
})
}
}
})
</script>
4、修饰符
data: {
user: {}
}
<!-- 修饰符用于指出一个指令应该以特殊方式绑定。
这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault():
即阻止表单提交的默认行为 -->
<form action="save" v-on:submit.prevent="onSubmit">
<label for="username">
<input type="text" id="username" v-model="user.username">
<button type="submit">保存</button>
</label>
</form>
methods: {
onSubmit() {
if (this.user.username) {
console.log('提交表单')
} else {
alert('请输入用户名')
}
}
}
5、条件渲染
data: {
ok: false
}
<input type="checkbox" v-model="ok">同意许可协议
<!-- v:if条件指令:还有v-else、v-else-if 切换开销大 -->
<h1 v-if="ok">if:Lorem ipsum dolor sit amet.</h1>
<h1 v-else>no</h1>
<!-- v:show 条件指令 初始渲染开销大 -->
<h1 v-show="ok">show:Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>
v-if
是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。- 相比之下,
v-show
就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。 - 一般来说,
v-if
有更高的切换开销,而v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show
较好;如果在运行时条件很少改变,则使用v-if
较好。
6、列表渲染
<!-- 1、简单的列表渲染 -->
<ul>
<li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
<!-- 如果想获取索引,则使用index关键字,注意,圆括号中的index必须放在后面 -->
<li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>
data: {
numbers: [1, 2, 3, 4, 5]
}
<!-- 2、遍历数组,使用计算属性 -->
<ul>
<li v-for="n in numbers">{{ n }}</li>
</ul>
<ul>
<li v-for="n in evenNumbers">{{ n }}</li>
</ul>
// 计算属性:这里的数据是通过某种方式计算出来的
computed: {
evenNumbers() {
console.log('计算属性 evenNumbers')
// filter:遍历numbers,并返回满足条件的值,放在一个数组中
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
data: {
userList: [
{ id: 1, username: 'helen', age: 18 },
{ id: 2, username: 'peter', age: 28 },
{ id: 3, username: 'andy', age: 38 }
]
}
<!-- 3、遍历数据列表 -->
<table border="1">
<!-- <tr v-for="item in userList"></tr> -->
<tr v-for="(item, index) in userList">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>
data: {
user:{
id: 1,
username: 'helen',
age: 18
}
}
<!-- 4、遍历对象 -->
<!-- 直接访问 -->
<form action="">
<p><label>id:<input type="text" v-model="user.id"></label></p>
<p><label>用户名:<input type="text" v-model="user.username"></label></p>
<p><label>年龄:<input type="text" v-model="user.age"></label></p>
</form>
<!-- 遍历 -->
<form action="">
<!-- <p v-for="value in user"> -->
<p v-for="(value, key, index) in user">
<label>{{index}}-{{key}}:<input type="text" v-model="value"></label>
</p>
</form>
7、计算属性
data: {
message: '上海自来水来自海上 haha'
}
<p>原始值: "{{ message }}"</p>
<!-- 1、插值数据绑定中使用表达式 -->
<p>反转消息: {{ message.split('').reverse().join('') }}</p>
computed: {
reversedMessage () {
return this.message.split('').reverse().join('')
}
}
<!-- 2、使用计算属性 -->
<p>反转消息: "{{ reversedMessage }}"</p>
methods:{
reversed () {
return this.message.split('').reverse().join('')
}
}
<!-- 3、使用方法 -->
<p>反转消息: "{{ reversed() }}"</p>
- 计算属性基于缓存:在相关依赖发生改变时它们才会重新求值。
- 方法将总会再次执行
我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 计算!如果你不希望有缓存,请用方法来替代。
<!-- 2、使用计算属性 -->
<p>反转消息: "{{ reversedMessage }}"</p>
<!-- 调用两次只执行一次属性的计算 -->
<p>反转消息: "{{ reversedMessage }}"</p>
<!-- 3、使用方法 -->
<p>反转消息: "{{ reversed() }}"</p>
<!-- 调用两次执行了两次属性的计算 -->
<p>反转消息: "{{ reversed() }}"</p>
8、侦听属性
data: {
firstName: '道格拉斯',
lastName: '狗剩'
fullName: '道格拉斯 狗剩'
},
watch: {
firstName(val){
console.log('firstName changed...')
this.fullName = val + ' ' + this.lastName
},
lastName(val){
console.log('lastName changed...')
this.fullName = this.firstName + ' ' + val
}
}
<label>名:<input type="text" v-model="firstName"></label>
<label>姓:<input type="text" v-model="lastName"></label>
{{fullName}}
data: {
firstName: '道格拉斯',
lastName: '狗剩'
// fullName: 'Foo Bar' //既然fullName需要被计算,那么将此属性放在计算属性中
},
computed: {
fullName () {
return this.firstName + ' ' + this.lastName
}
}
<p>
Ask a yes/no question:
<input v-model="question">
<button @click="getAnswer()">提问</button>
</p>
<p>{{ answer }}</p>
var app = new Vue({
el: '#app',
data: {
question: '',
answer: '请提问!'
},
methods: {
getAnswer: function () {
this.answer = '我想想...'
var vm = this
$.ajax({
url: 'https://yesno.wtf/api',
type: 'get',
success(data) {
// console.log(this);
vm.answer = data.answer
},
error (error) {
vm.answer = '网找不到API接口. ' + error
}
})
}
}
})
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = '等待您停止输入...'
this.getAnswer()
}
}
9、过滤器
data: {
userList: [
{id: 1, name: 'peter', gender: 1},
{id: 2, name: 'helen', gender: 0}
]
}
<table border="1">
<tr v-for="item in userList">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<!-- <td>{{item.gender}}</td> -->
<td>
<span v-if="item.gender === 1">男</span>
<span v-else>女</span>
</td>
</tr>
</table>
// filters 定义局部过滤器,只可以在当前vue实例中使用
filters: {
genderFilter(gender) {
return gender === 1 ? '男' : '女'
}
}
<td>
<!-- | 管道符号:表示使用后面的过滤器处理前面的数据 -->
{{item.gender | genderFilter}}
</td>
// 在创建 Vue 实例之前全局定义过滤器:
Vue.filter('capitalize', function (value) {
return value.charAt(0).toUpperCase() + value.slice(1)
})
<td>{{item.name | capitalize}}</td>
var app2 = new Vue({
el: '#app2',
data: {
user: { id: 3, name: 'annie', gender: 0 }
}
})
<div id="app2">
<!-- 全局过滤器可以应用在不同的vue实例的渲染范围中 -->
{{user.name | capitalize}}
<!-- 局部过滤器则不可以,只能应用在定义的vue实例中 -->
{{user.gender | genderFilter}}
</div>
v-bind
表达式前端框架-Vue 入门的更多相关文章
- 前端框架Vue入门
1.Vue简介 Vue是一套构建用户界面的渐进性框架.Vue采用自底向上增量开发的设计,其关注点在图层,与angular的区别就在这里,它关注的是图层,而angular注释的是数据. 2.与React ...
- 前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue
前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
- 前端框架 Vue 初探
一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...
- 前端框架 vue 和 react 的区别
前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...
- 可能是目前最完整的前端框架 Vue.js 全面介绍
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...
- 前端框架VUE——安装及初始化
本篇文章适合,想要学习 vue,但对 vue 又没有接触过的同学阅读,是非常基础的内容.告诉大家使用 vue 时的安装方式,及如何创建实例,展示内容. 一.安装方式 vue 是一种前端框架,所以使用前 ...
- Bootstrap前端框架快速入门专题
1.Bootstrap简介 Bootstrap,出自自 Twitter,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 W ...
随机推荐
- Prime_Series_Level-1
0x01 先收集靶机端口,目录信息 1)nmap扫描端口 开启了ssh服务和apache服务,搜索相关漏洞 只有一个ssh用户名枚举,先放着 2)dirb爆破目录 dirb http://192.16 ...
- Qt的qDebug()改写为cout
经常用c++,qDebug()用的不习惯,将其改为cout,并且为了方便调试,还添加了文件名及行号. 代码如下: // __FILE__文件名,__LINE__行号,如果想看时间还可以添加__TIME ...
- 【内推】微软北京深圳招聘多名Cloud Solution Architect
Azure is the most comprehensive, innovative and flexible cloud platform today and Microsoft is hirin ...
- @RequestBody 和 @RequestParam(“test”) 的区别与联系
@RequestBody @RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的):GET方式无请求体,所以使用@RequestBody接收数据时,前端不能使用 ...
- java课程学习心得
首先是枚举,使用enum关键字创建,如:enum {SMALL,MEDIUM,LARGE}之后便可定义Size 的类型变量,并复制为{SMALL,MEDIUM,LARGE};其中一个,注意赋值方法,x ...
- javaweb实现注册页面(数据库连接以及ajax验证)
先放效果图 可实现js实时验证 可实现ajax实时验证注册信息是否存在 页面实现要求 1登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头:(1分) 2登录密码:要求 ...
- 【巨杉数据库SequoiaDB】社区分享 | SequoiaDB + JanusGraph 实践
本文来自社区用户投稿,感谢小伙伴的技术分享 项目背景 大家好!在春节这段时间里,由于一直在家,所以花时间捣鼓了一下代码,自己做了 SequoiaDB 和 JanusGraph 的兼容扩展工作. 自己觉 ...
- c#在类里不能使用Response解决方法
response对应的类是HttpResponse, 在System.Web 命名字间里, 如果你在类中要使用 Response 的话, 需要使用System.Web.HttpConte ...
- 牛客寒假6-I 导航系统
链接:https://ac.nowcoder.com/acm/contest/3007/I来源:牛客网 题目描述 小 Q 所在的国家有 N 个城市,城市间由 N-1 条双向道路连接,任意一对城市都是互 ...
- PAT (Basic Level) Practice (中文)1030 完美数列 (25 分) (有点意思)
给定一个正整数数列,和正整数 p,设这个数列中的最大值是 M,最小值是 m,如果 M≤mp,则称这个数列是完美数列. 现在给定参数 p 和一些正整数,请你从中选择尽可能多的数构成一个完美数列. 输入格 ...