前端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 ...
随机推荐
- MySQL数据库（良心资料）
一.MySQL数据库 1.数据库简介 1.1.数据库的概念 数据库就是用来存储和管理数据的仓库.数据库存储数据的优点: l 可存储大量数据: l 方便检索: l 保持数据的一致性.完整性: l ...
- Nginx总结（六）nginx实现负载均衡
前面讲了如何配置Nginx虚拟主机,大家可以去这里看看nginx系列文章:https://www.cnblogs.com/zhangweizhong/category/1529997.html 今天要 ...
- 今天遇到 Request failed: method not allowed (405)。 错误，特此在网上翻了翻
Q1: 遇到405请求错误.提示:NSLocalizedDescription=Request failed: method not allowed (405).解决方案:405请求方法不被允许.这时 ...
- STL容器（Stack, Queue, List, Vector, Deque, Priority_Queue, Map, Pair, Set, Multiset, Multimap）
一.Stack(栈) 这个没啥好说的,就是后进先出的一个容器. 基本操作有: stack<int>q; q.push(); //入栈 q.pop(); //出栈 q.top(); //返回 ...
- 怎么在本地建立一个Maven 项目push到码云（https://git.oschina.net）
本地建立一个的mvan项目不使用SmartGit push到码云上. 1 首先在自己码云的建立一个maven 空项目 2 然后打开STS(Spring Tool Suite) 新建一个Maven( ...
- react navigation goBack()返回到任意页面(不集成redux) 二
实现思路: A -- > B (获取A的key值,传至C)-- >C(获取B传来的A页面key值,传至D) -- >D(获取C传来的A页面key值&C页面的key值,传至下一 ...
- HTML连载38-内边距属性、外边距属性
一.内边距属性 1.定义:边框和内容之间的距离就是内边距 2.分开写 padding-top:数字px: padding-left:数字px: padding-bottom:数字px: padding ...
- 【面试】足够“忽悠”面试官的『Spring事务管理器』源码阅读梳理（建议珍藏）
PS:文章内容涉及源码,请耐心阅读. 理论实践,相辅相成 伟大领袖毛主席告诉我们实践出真知.这是无比正确的.但是也会很辛苦. 就像淘金一样,从大量沙子中淘出金子一定是一个无比艰辛的过程.但如果真能淘出 ...
- 搭建数据库galera集群
galera集群 galera简介 galera集群又叫多主集群,用于数据库的同步,保证数据安全 最少3台,最好是奇数台数,当一台机器宕掉时,因为仲裁机制,这台机器就会被踢出集群. 通过wsrep协议 ...
- Mybatis源码解析，一步一步从浅入深（七）：执行查询
一,前言 我们在文章:Mybatis源码解析,一步一步从浅入深(二):按步骤解析源码的最后一步说到执行查询的关键代码: result = sqlSession.selectOne(command.ge ...