前端Vue知识小白
感觉是已好久没写博文了。今日难得有时间，便写一篇文章。此文章是关于前端知识的，我本身是后端，因工作或其他需要，便学习了前端Vue。此文章是在菜鸟教程上学习的。那么下面进入正文！
首先，Vue.js是一套构建用户界面的渐进式框架。只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单,不过因人而异，有人学的比较快，有人学的较慢。只要有心，有目标，肯定会有收获的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="js/vue.js"></script>
</head>
<style type="text/css">
.class1{background: #444;color: #eee;}
.active{width: 100px;height: 100px;background: green;}
.text-danger{background: red;}
</style>
<body>
<!-- 指令是带有 v- 前缀的特殊属性 -->
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a> <div id="demo1">
<h2>site : {{ site }}</h2>
<h2>url : {{ url }}</h2>
<h2>zys : {{ zys }}</h2>
<h2>{{ findUser() }}</h2>
<div v-html="message"></div>
</div>
<script type="text/javascript">
var vue = new Vue({
el: '#demo1',
data: {
site: "123456",
url: "http://baidu.com",
zys: "zys",
message: "<h1>菜鸟教程</h1>"
},
methods: {
findUser: function(){
return this.zys + ",有梦想,加油！！！"
}
}
});
</script>
<div id="demo2">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1':use}">
v-bind:class 指令
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#demo2',
data: {
use: false
}
});
</script>
<div id="demo3">
<h2>{{ 5 + 5}}</h2><br>
{{ok ? "YES" : "NO"}}<br>
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script type="text/javascript">
new Vue({
el: '#demo3',
data: {
ok: true,
message: 'RUNOOB',
id: 2
}
});
</script>
<div id="demo4">
<h2 v-if="see1">现在你可以看到我</h2>
<template v-if="ok">
<h3>Hello World!!!</h3>
</template>
</div>
<script type="text/javascript">
new Vue({
el: '#demo4',
data: {
see1: true,
ok: true
}
});
</script> <div id="demo5">
<a v-bind:href="url">百度</a>
</div>
<script type="text/javascript">
new Vue({
el: '#demo5',
data: {
url: "http://baidu.com"
}
});
</script> <div id="demo6"><!-- 使用 v-model 指令来实现双向数据绑定 -->
{{ msg }}
<input v-model="msg">
</div>
<script type="text/javascript">
new Vue({
el: '#demo6',
data: {
msg: "你好"
}
});
</script> <div id="demo7"><!-- 使用 v-on 监听事件 -->
{{ msg }}
<button v-on:click="reverseMsg">反转字符串</button>
</div>
<script type="text/javascript">
new Vue({
el: '#demo7',
data: {
msg : "Runoob!"
},
methods: {
reverseMsg: function (){
this.msg = this.msg.split('').reverse().join('');
}
}
});
</script>
<div id="demo8">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#demo8',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
<div id="demo9">
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not Sorry
</div>
</div>
<script>
new Vue({
el: '#demo9'
})
</script>
<div id="demo10">
<div v-if="type=='A'">
A
</div>
<div v-else-if="type=='B'">
B
</div>
<div v-else-if="type=='C'">
C
</div>
<div v-else>
Not ABC
</div>
</div>
<script>
new Vue({
el: '#demo10',
data: {
type: 'A'
}
})
</script> <div id="demo11"><!-- v-for 可以绑定数据到数组来渲染一个列表 -->
<ol><!-- v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 -->
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#demo11',
data: {
sites: [
{ name : 'A'},
{ name : 'B'},
{ name : 'C'}
]
}
})
</script>
<div id="demo12"><!-- v-for 可以通过一个对象的属性来迭代数据 -->
<ol>
<li v-for="value in object">
{{ value }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#demo12',
data: {
object: {
name: "菜鸟教程",
url: "http://baidu.com",
explain: "说明描述等等",
}
}
})
</script>
<div id="demo13"><!-- v-for 也可以循环整数 -->
<li v-for="n in 10">
{{ n }}
</li>
</div>
<script>
new Vue({
el: '#demo13'
})
</script> <div id="demo14"><!-- 计算属性关键词: computed -->
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
new Vue({
el: '#demo14',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
<div id="demo15"><!-- 通过 watch 来响应数据的变化 -->
<p style="font-size: 25px;">计数器: {{ counter }}</p>
<button @click="counter++" style="font-size: 25px;">点击</button>
</div>
<script>
var vm = new Vue({
el: '#demo15',
data: {
counter: 1
}
});
vm.$watch('counter',function(nval,oval){
alert("计数器值的变化：" + oval + "变为" + nval + "!");
});
</script>
<div id="demo16"><!-- 千米与米之间的换算 -->
千米：<input type="text" v-model="kilometers">
米：<input type="text" v-model="meters">
<p id="info"></p>
</div>
<script>
var vm = new Vue({
el: '#demo16',
data: {
kilometers: 0,
meters: 0
},
methods: { },
watch: {
kilometers:function(val){
this.kilometers = val;
this.meters = this.kilometers*1000;
},
meters:function(val){
this.kilometers = val/1000;
this.meters = val;
}
}
});
vm.$watch('kilometers',function(newValue,oldValue){
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
});
</script> <div id="demo17"><!-- 样式绑定 -->
<!-- <div class="active"></div> -->
<div :class="{active: isActive}"></div>
</div>
<script>
new Vue({
el: '#demo17',
data: {
isActive: true
}
});
</script>
<div id="demo18"><!-- 可以在对象中传入更多属性用来动态切换多个 class -->
<!-- <div class="static active text-danger"></div> -->
<div class="static" :class="{active: isActive,'text-danger': hasError}"></div>
</div>
<script>
new Vue({
el: '#demo18',
data: {
isActive: true,
hasError: true
}
});
</script>
<div id="demo19"><!-- 可以把一个数组传给 v-bind:class -->
<div :class="[activeClass, errorClass]"></div>
</div>
<script>
new Vue({
el: '#demo19',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
});
</script>
<div id="demo20"><!-- 可以把一个数组传给 v-bind:class -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>
<script>
new Vue({
el: '#demo20',
data: {
activeColor: 'green',
fontSize: 30
}
});
</script>
<div id="demo21"><!-- 可以把一个数组传给 v-bind:class -->
<div :style="styleObject">菜鸟教程</div>
</div>
<script>
new Vue({
el: '#demo21',
data: {
styleObject: {
color: 'orange',
fontSize: '30px'
}
}
});
</script> <div id="demo22"><!-- Vue.js 事件处理器 -->
<button @click="counter += 1">增加1</button>
<p>这个按钮被点击了{{ counter }}次！</p>
</div>
<script>
new Vue({
el: '#demo22',
data: {
counter: 0
}
});
</script>
<div id="demo23"><!-- Vue.js 事件处理器 -->
<button @click="greet">Greet</button>
</div>
<script>
new Vue({
el: '#demo23',
data: {
name: 'Vue.js'
},
methods:{
greet: function(event){
// `this` 在方法里指当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if(event){
alert(event.target.tagName)
}
}
}
});
</script>
<div id="demo24"><!-- 可以用内联 JavaScript -->
<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>
</div>
<script>
new Vue({
el: '#demo24',
methods:{
say: function(msg){
alert(msg)
}
}
});
</script>
<!-- 事件修饰符 -->
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a> <!-- 表单 -->
<div id="demo25"><!-- 可以用 v-model 指令在表单控件元素上创建双向数据绑定 -->
<input v-model="message" placeholder="编辑input">
<p>input消息是{{ message }}</p>
<textarea v-model="message2" placeholder="编辑textarea"></textarea>
<p>textarea消息是{{ message2 }}</p>
</div>
<script>
new Vue({
el: '#demo25',
data: {
message: 123,
message2: 456
}
});
</script>
<div id="demo26"><!-- 复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组 -->
<p>单个复选框</p>
<input type="checkbox" name="checkbox" v-model="checked">
<label>{{ checked }}</label>
<p>多个复选框</p>
<input type="checkbox" id="runoob" value="runoob" v-model="checkedNames"><label>Runoob</label>
<input type="checkbox" id="google" value="google" v-model="checkedNames"><label>Google</label>
<input type="checkbox" id="taobao" value="taobao" v-model="checkedNames"><label>Taobao</label>
<span>选择的值为: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#demo26',
data: {
checked: false,
checkedNames: []
}
});
</script>
<div id="demo27"><!-- 单选按钮的双向数据绑定 -->
<input type="radio" id="google" value="google" v-model="picked"><label>Google</label>
<input type="radio" id="runoob" value="runoob" v-model="picked"><label>Runoob</label>
<span>选择的值为: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#demo27',
data: {
picked: 'google'
}
});
</script>
<div id="demo28"><!-- 下拉列表的双向数据绑定 -->
<select v-model="selected" >
<option value="">选择一个网站</option>
<option value="http://google.com">谷歌</option>
<option value="http://baidu.com">百度</option>
</select>
<div>选择的网站：{{ selected }}</div>
</div>
<script>
new Vue({
el: '#demo28',
data: {
selected: ''
}
});
</script> <!-- 组件 -->
<!-- 注册一个全局组件语法格式 Vue.component(tagName, options) -->
<!-- tagName 为组件名，options 为配置选项 <tagName></tagName> --> <!-- 全局组件 -->
<div id="demo29">
<runoob></runoob>
</div>
<script>
/*注册*/
Vue.component('runoob',{
template: '<h1>自定义组件1！</h1>'
})
/*创建根实例*/
new Vue({
el: '#demo29'
})
</script>
<!-- 局部组件 -->
<div id="demo30">
<runoob></runoob>
</div>
<script>
/*注册*/
var Chlid = {
template: '<h1>自定义组件2！</h1>'
}
/*创建根实例*/
new Vue({
el: '#demo30',
components:{
// <runoob> 将只在父模板可用
'runoob': Chlid
}
})
</script>
<!-- prop 是父组件用来传递数据的一个自定义属性 -->
<div id="demo31">
<chlid message="hello!"></chlid>
</div>
<script>
Vue.component('chlid',{
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
/*创建根实例*/
new Vue({
el: '#demo31'
})
</script>
</body>
</html>
以上这些Demo呢，是Vue部分知识点，后续呢我也会学习下面的知识，让我们一起进步，当然我这边只是我学习完之后的总结。具体想看详细的话，可看官方文档，便于自己学习。
目标就像船舰上的指南针，有指南针才知去何方。而那些没有指南针的船舰只能跟随它去远方，做一个小目标吧，让告诉你究竟想要干什么！
前端Vue知识小白的更多相关文章
- 前端知识扫盲-VUE知识篇一（VUE核心知识）
最近对整个前端的知识做了一次复盘,总结了一些知识点,分享给大家有助于加深印象. 想要更加理解透彻的同学,还需要大家自己去查阅资料或者翻看源码.后面会陆续的更新一些相关注知识点的文章. 文章只提出问题, ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍
web前端Vue+Django rest framework 框架 生鲜电商项目实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...
- 总结vue知识体系之实用技巧
vue 作为目前前端三大框架之一,对于前端开发者可以说是必备技能.那么怎么系统地学习和掌握 vue 呢?为此,我做了简单的知识体系体系总结,不足之处请各位大佬多多包涵和指正,如果喜欢的可以点个小赞!本 ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- 转：前端冷知识(~~some fun , some useful)
前端不为人知的一面——前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Qu ...
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- vue知识总结
vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...
随机推荐
- Web框架之Gin
Gin是一个用Go语言编写的web框架.它是一个类似于martini但拥有更好性能的API框架, 由于使用了httprouter,速度提高了近40倍. 如果你是性能和高效的追求者, 你会爱上Gin. ...
- Python网络爬虫实战(三)照片定位与B站弹幕
之前两篇已经说完了如何爬取网页以及如何解析其中的数据,那么今天我们就可以开始第一次实战了. 这篇实战包含两个内容. * 利用爬虫调用Api来解析照片的拍摄位置 * 利用爬虫爬取Bilibili视频中的 ...
- 关于Elasticsearch文档的描述以及如何操作文档的详细总结
文档 什么是文档 在大多数应用中,多数实体或对象可以被序列化为包含键值对的 JSON 对象. 一个 键 可以是一个字段或字段的名称,一个 值 可以是一个字符串,一个数字,一个布尔值, 另一个对象,一些 ...
- Python文件访问编码格式问题UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position xx: 解决方案
1.Python读取文件 # .打开文件 file = open("ReadMe") # .读取文件类容 text = file.read() print(text) # .关闭文 ...
- 干货| 外卖点餐系统（App及后台）
简单总结一下,这个系统是一个外卖点餐系统,也就是仿美团饿了么,也是当时我的毕业设计,花费了我很多精力,主要包括了移动端App.服务端(中台)和商家的后台管理.答辩完后我就将移动端源码放到了GitHub ...
- 浅谈ViewPager与TabLayout的简单用法
今天介绍一下ViewPager与TabLayout的简单用法 1.准备 在一切开始之前,你懂得,先导库,老方法,在build.gradle直接添加下面这一句 implementation ...
- [Flask Tips]Flask-APScheduler用法总结
在应用中需要使用调度框架来做一些统计的功能,可惜在Windows上可用的不多,最后选择了APScheduler这个调度器. 用法不多介绍,只总结一下在使用中遇到的坑. app_context 问题 凡 ...
- [Linux] Linux下undefined reference to ‘pthread_create’问题解决
问题的原因:pthread不是Linux下的默认的库,也就是在链接的时候,无法找到phread库中函数的入口地址,于是链接会失败. 解决:在gcc编译的时候,附加要加 -lpthread参数即可解决.
- MySQL性能优化以及常用命令
1.将查询操作SELECT中WHERE条件后面和排序字段建立索引 2.按需查询,需要哪个字段就查哪个字段,禁止使用"SELECT * " 3.数据库引擎最好选用InnoDB,少用M ...
- elasticsearch的分布式基础概念(1)
Elasticsearch对复杂分布式机制的透明隐藏特性 Elasticsearch是一套分布式的系统,分布式是为了应对大数据量 隐藏了复杂的分布式机制 分片机制(随随便便就将一些document插入 ...