前端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 ...
随机推荐
- 十天快速入门Python
课程导学 001 课程定位和目标 002 课程导学 第一部分 Python快速入门 第1天 Python基本语法元素 003 Python基本语法元素 004 程序设计基本方法 005 Python开 ...
- netcore 基于 DispatchProxy 实现一个简单Rpc远程调用
前言 netcore 发布以来,一直很关注netcore的进程.目前在公司负责的网站也历经波折的全部有.net framework 4.0 全部切换到netcore 2.2 版本中.虽然过程遇到的坑不 ...
- 作为一名Android开发者，你有过迷茫吗？
前言 经常听新进的小白问道,Android是不是饱和了?想写一篇关于Android开发者忧虑的文章很久了,今天才提起勇气写.最近不管是在微信.QQ群,还是在各大博客网站,都随处听得到Android开发 ...
- 体验一下：AndroidX
背景 今天在更新 ButterKnife 到最新版本的时候出现了一个问题,我引入的是 10.1.0 最新版本: implementation 'com.jakewharton:butterknife: ...
- Hadoop常见重要命令行操作及命令作用
关于Hadoop [root@master ~]# hadoop --help Usage: hadoop [--config confdir] COMMANDwhere COMMAND is one ...
- STL中的unique和unique_copy函数
一.unique函数 这个函数的功能就是删除相邻的重复元素,然后重新排列输入范围内的元素,并返回一个最后一个无重复值的迭代器(并不改变容器长度). 例如: vector<); ; i < ...
- ES6新增常见特性
一:声明属性let const var let const 区别 1.var声明变量会发生变量提升,let.const不会发生变量提升 2.var允许重复声明变量,let不可以 3.const声明变量 ...
- 第六届蓝桥杯java b组第二题
立方变自身 观察下面的现象,某个数字的立方,按位累加仍然等于自身. 1^3 = 1 8^3 = 512 5+1+2=8 17^3 = 4913 4+9+1+3=17 … 请你计算包括1,8,17在内, ...
- 带UI的小初高数学学习软件
结对编程项目总结 一.项目需求分析与功能总结 (1)用户注册功能 用户提供手机号码,点击注册将收到一个注册码,用户可使用该注册码完成注册. (2)设置密码功能 密码6-10位,必须含大小写字母和数 ...
- NET Core 3.0 新姿势 将AutoFac替换内置DI
.NET Core 3.0 和 以往版本不同,替换AutoFac服务的方式有了一定的变化,在尝试着升级项目的时候出现了一些问题. 原来在NET Core 2.1时候,AutoFac返回一个 IServ ...