前端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之B+TREE索引原理
1.什么是索引? 索引:加速查询的数据结构. 2.索引常见数据结构 顺序查找: 最基本的查询算法-复杂度O(n),大数据量此算法效率糟糕. 二叉树查找:(binary tree search): O( ...
- Fortify安全漏洞一般处理方法
前段时间公司又一轮安全审查,要求对各项目进行安全扫描,排查漏洞并修复,手上有几个历史项目,要求在限定的时间内全部修复并提交安全报告,也不清楚之前是如何做的漏洞修复,这次使用工具扫描出来平均每个项目都还 ...
- ubuntu16.04设置bind9.10.3的chroot运行
重点:1)系统是ubuntu的16.04 bind9.10.3 2)确保你的系统是没问题的,我之前的16.04有问题,在虚拟机上怎么都操作都不行, 在/var/log/syslog可以看到:could ...
- 实验吧CTF练习题---WEB---貌似有点难解析
实验吧web之貌似有点难 地址:http://www.shiyanbar.com/ctf/32 flag值:SimCTF{daima_shengji} 解题步骤: 1.打开题目页面,观察题目要 ...
- equals、==、hashCode
equals和==的区别 ==主要用来比较基本数据类型,而equal主要用来比较对象是否相等.equal是Object的方法. 如果两者都用来比较对象的相等性,那么如果两个引用地址相同,那么==就返回 ...
- FreeSql （二十三）分组、聚合
IFreeSql fsql = new FreeSql.FreeSqlBuilder() .UseConnectionString(FreeSql.DataType.MySql, "Data ...
- Spring Boot 利用 nginx 实现生产环境的伪热更新
当我们在服务器部署Java程序,特别是使用了 Spring Boot 生成单一 Jar 文件部署的时候,单一文件为我们开发单来的极大的便利性,保障程序的完整性.但同时对我们修改程序中的任何一处都带来重 ...
- MySQL优化之索引原理（二）
一,前言 上一篇内容说到了MySQL存储引擎的相关内容,及数据类型的选择优化.下面再来说说索引的内容,包括对B-Tree和B+Tree两者的区别. 1.1,什么是索引 索引是存储引擎用于快速找 ...
- jmeter性能分析
1.硬件要求:包括客户端和服务端的cpu,mem,network,disk等,这些硬件设备必须满足性能测试的前提下,才能进行性能测试,否则得到的各项指标不一定是正确的 2.场景分析: 测试前的准备工作 ...
- python+selenium一：对浏览器的常规操作
# 1.打开Firefox浏览器 from selenium import webdriverdriver = webdriver.Firefox()driver.get("https:// ...