Vue.js 学习
一，Vue.js 介绍
Vue 是一套用于构建用户界面的渐进式javascript框架，与其它大型框架不同的是：Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，另外一个方面,当Vue与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动
Vue.js是用于构建交互式的Web界面的库，它提供MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。从技术上讲，Vue.js集中在MVVM模式上的视图模型层(viewModel)，并通过双向数据绑定连接视图（view） 和模型（model）。实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其他的MVVM框架，Vue.js更容易上手，它让你通过简单而灵活的API创建由数据驱动的UI组件
- Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
二，导包和IDEA设置
导入相关jar包
IDEA设置
三，Vue 练习
1，Vue01 --- 插值表达式
1-1.代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Vue01-插值表达式</title>
6 <!--当网速较慢，Vue初始化未完成时，插值表达式不能被解析，会直接显示出来，
7 加载完毕之后又会被替换成真实结果，造成闪烁，加上[v-cloak]会隐藏未加载完毕的插值表达式-->
8 <style>
9 [v-cloak] {
10 display: none;
11 }
12 </style>
13 </head>
14 <body>
15 <h1>v-cloak、v-text、v-html指令以及插值表达式的学习</h1>
16 <div id="vue">
17 <p v-cloak>{{msg1}}</p>
18 <p v-text="msg2"></p>
19 <p>{{msg3}}</p>
20 <p v-html="msg3"></p>
21 </div>
22
23 <script src="../lib/vue.js"></script>
24 <script>
25 var vm = new Vue({
26 el: "#vue",
27 data: {
28 msg1: "hello,vue1",
29 msg2: "hello,vue2",
30 msg3:"<p style='color:red'>我是一个p标签</p>"
31 }
32 })
33 </script>
34 </body>
35 </html>
1-2.运行结果
2，Vue02 --- bind+on指令
2-1.代码
1 <!DOCTYPE html>
2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta charset="UTF-8">
5 <title>Vue02-bind+on指令</title>
6 <script src="../lib/vue.js" type="text/javascript"></script>
7 </head>
8 <body>
9 <h1>v-bind、v-on指令的学习</h1>
10 <div id="vue">
11 <!-- v-bind:可以简写为: -->
12 <label>用户名：<input type="text" name="username" v-bind:value="msg"/></label>
13 <hr>
14 <label>用户名：<input type="text" name="username" :value="msg"/></label>
15 <hr>
16 <label>用户名：<input type="text" name="username" :value="'你好：'+msg"/></label>
17 <hr>
18 <!-- v-on:等价于@ -->
19 <button v-on:click="show(name)">点击下显示</button>
20 <hr>
21 <button @click="show(name)">点击下显示</button>
22 </div>
23
24 <script type="text/javascript">
25 var vue = new Vue({
26 el: "#vue",
27 data: {
28 msg: "钢铁侠",
29 name: "蜘蛛侠"
30 },
31 methods: {
32 show: function (name) {
33 alert("皮特帕克：" + name);
34 }
35 }
36 })
37 </script>
38 </body>
39 </html>
2-2.运行结果
3，Vue03 --- 实现跑马灯效果
3-1.代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Vue</title>
6 <script src="../lib/vue.js" type="text/javascript"></script>
7 </head>
8 <body>
9 <h1>使用Vue实现跑马灯效果</h1>
10
11 <div id="vue">
12 <button @click="lang()">开始</button>
13 <button @click="stop()">停止</button>
14 <h3 v-html="info"></h3>
15 </div>
16
17 <script type="text/javascript">
18 var vue = new Vue({
19 el: "#vue",
20 data: {
21 info: "猥琐发育别浪~稳住我们能赢~发起进攻~回防高地~",
22 timer: null //计时器
23 },
24 methods: {
25 lang: function () {
26 //此时的this就是vm对象（info、lang、stop等都是直接挂在vm身上的）
27 //console.log(this.info);
28 if (this.timer !== null) {
29 return;
30 }
31 this.timer = setInterval(() => { //设置间隔
32 //此时的this代表vm对象
33 //console.log(this);
34 this.info = this.info.substring(1).concat(this.info.charAt(0));
35 }, 200);
36 },
37
38 stop() {
39 clearInterval(this.timer); //清除间隔
40 this.timer = null;
41 }
42 }
43 })
44 </script>
45 </body>
46 </html>
3-2.运行结果
4，Vue04 --- 双向数据绑定和实现计算机
4-1.代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Vue04 --- 双向数据绑定和实现计算机</title>
6 <script src="../lib/vue.js" type="text/javascript"></script>
7 </head>
8 <body>
9 <div class="box">
10 <h1>Vue中的双向数据绑定指令v-mode</h1>
11 <label>单价：<input type="text" v-model="price"></label><br/>
12 <label>数量：<input type="text" v-model="num"></label><br/>
13 <button @click="calc1()">点击计算总价</button>
14 <br/>
15 <label>总价：<span style="color:red" v-text="sum"></span></label>
16 <hr/>
17 <h1>使用v-mode双向数据绑定实现建议计算器</h1>
18 <label>操作数1：<input type="text" v-model="num1"/></label>
19 <select v-model="operator">
20 <option value="+">+</option>
21 <option value="-">-</option>
22 <option value="*">x</option>
23 <option value="/">/</option>
24 </select>
25 <label>操作数1：<input type="text" v-model="num2"/></label>
26 <button @click="calc2()">=</button>
27 <span style="font-size: 20px;color:blue" v-text="result"></span>
28 </div>
29
30 <script type="text/javascript">
31 var vue = new Vue({
32 el: ".box",
33 data: {
34 price: 3,
35 num: 2,
36 sum: 6,
37 num1: '1',
38 num2: '2',
39 operator: '+',
40 result: 3
41 },
42 methods: {
43 calc1() {
44 this.sum = this.price * this.num;
45 },
46 calc2() {
47 // JavaScript的eval()方法可以把一个字符串当作JavaScript代码执行，并返回执行结果
48 //当代码很复杂或难以控制时可以使用此方法，大多数还是使用标准方法执行JavaScript代码
49 this.result = eval("parseInt(this.num1)" + this.operator + "parseInt(this.num2)");
50 }
51 }
52 })
53 </script>
54 </body>
55 </html>
4-2.运行结果
5，Vue05 --- for指令
5-1.代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Vue05 --- for指令</title>
6 <script src="../lib/vue.js" type="text/javascript"></script>
7 </head>
8 <body>
9 <div id="app">
10 <h1>Vue中的for指令</h1>
11
12 <!--val in arrays，这个var就是取出来的值-->
13 <!--遍历普通数组-->
14 <p v-for="name in names">{{name}}</p>
15 <!--数组下标从0开始，index是默认的属性-->
16 <p v-for="name,index in names" v-text="name+'--->'+index"/>
17 <hr>
18 <!--遍历对象数组-->
19 <p v-for="user in users">id：{{user.id}}-->名字：{{user.name}}-->年龄：{{user.age}}</p>
20 <hr>
21 <!--遍历普通对象的键和值-->
22 <p v-for="value,key in Shandx">{{key}}---{{value}}</p>
23 <!--for循环固定的次数,遍历的值名不能为var-->
24 <p v-for="num in 3">{{num}}</p>
25
26 <h1>Vue中的for指令实现数据绑定</h1>
27 <label>id：<input type="text" v-model="id"/></label>
28 <label>name：<input type="text" v-model="name"/></label>
29 <label>age：<input type="text" v-model="age"/></label>
30 <label><button @click="add()">添加人员信息</button></label>
31 <p v-for="user in users" :key="user.id">
32 <label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label>
33 </p>
34 </div>
35
36 <script src="../lib/vue.js"></script>
37 <script>
38 var vm = new Vue({
39 el:"#app",
40 data:{
41 names:["蜘蛛侠","钢铁侠","美国队长","雷神"],
42 users:[
43 {id:1,name:"科比",age:39},
44 {id:2,name:"韦德",age:37},
45 {id:3,name:"库里",age:32}
46 ],
47 Shandx:{id:1,name:"闪电侠",age:3,hobby:"run"}
48 },
49 methods:{
50 add(){
51 //数组的push()方法用于向数组末尾加入元素
52 //数组的unshift()方法用于向数组最前面加入元素
53 this.users.unshift({id:this.id,name:this.name,age:this.age});
54 }
55 }
56 });
57 </script>
58 </body>
59 </html>
5-2.运行结果
6，Vue06 --- if和show指令
6-1.代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Vue06 --- if和show指令</title>
6 <script src="../lib/vue.js" type="text/javascript"></script>
7 </head>
8 <body>
9 <h1>使用vue中的v-if和v-show指令实现元素的显示和隐藏</h1>
10 <div id="app">
11 <button @click="toggle()">显示</button>
12 <button @click="flag=!flag">隐藏</button>
13 <!--v-if为true，则显示-->
14 <p v-if="flag">我是使用v-if控制的p标签</p>
15 <!--v-show为true，则显示-->
16 <p v-show="flag">我是使用v-show控制的p标签</p>
17 </div>
18 <script type="text/javascript">
19 var vm = new Vue({
20 el:"#app",
21 data:{
22 flag:true
23 },
24 methods:{
25 toggle(){
26 this.flag = !this.flag;
27 }
28 }
29 });
30 </script>
31 </body>
32 </html>
6-2.运行结果
7，Vue07 --- 在Vue中自定义过滤器
7-1.代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Vue07 --- 在Vue中自定义过滤器</title>
6 <script src="../lib/vue.js" type="text/javascript"></script>
7 </head>
8 <body>
9 <h1>在Vue中自定义过滤器</h1>
10 <div id="app1">
11 {{msg|show()}}
12 </div>
13 <div id="app2">
14 {{msg|show()}}
15 </div>
16
17 <!--导入Vue-->
18 <script>
19 //全局过滤器
20 Vue.filter("show",function(a){
21 return a.replace('钢铁侠',"*")
22 });
23
24 var vm1 = new Vue({
25 el:"#app1",
26 data:{
27 msg:"我是钢铁侠"
28 },
29 filters:{
30 show:function(a){
31 return a.replace('钢铁侠',"#")
32 }
33 }
34 });
35
36 var vm2 = new Vue({
37 el:"#app2",
38 data:{
39 msg:"我是钢铁侠"
40 },
41 filters:{
42 show(a){
43 return a.replace('钢铁侠',"!")
44 }
45 }
46 });
47 </script>
48 </body>
49 </html>
7-2.运行结果
8，Vue08 --- Vue中自定义指令详细测试
8-1.代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Vue中自定义指令详细测试</title>
6 <script src="../lib/vue.js" type="text/javascript"></script>
7 </head>
8 <body>
9
10 <div id="app">
11 <input type="text" v-shandx="'red'" value="闪电侠"/>
12 </div>
13
14 <script>
15 //自定义指令 v-*
16 Vue.directive("shandx",{
17 bind:function (el,binding) {
18 //el,指代指令作用的元素
19 //binding.value 就是你自定义指令后面的具体指 ， v-shandx=""
20 el.style.color = binding.value;
21 }
22 });
23 var vm = new Vue({
24 el:"#app",
25 directives:{}
26 })
27 </script>
28 </body>
29 </html>
8-2.运行结果
Vue.js 学习的更多相关文章
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- vue.js学习资料
vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
- vue.js学习之 打包为生产环境后，页面为白色
vue.js学习之 打包为生产环境后,页面为白色 一:配置问题 当我们将项目打包为生产环境后,在dist文件夹下打开index.html,会发现页面为白色. 1:打开config>index.j ...
- vue.js学习之 如何在手机上查看vue-cli构建的项目
vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 ...
- Vue.js学习-组件注册与使用
Vue.js学习文档 地址:https://cn.vuejs.org/v2/guide/ 关于自定义组件注册: 建议将<script></script>放在body标签之后 H ...
- vue.js学习记录
vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...
随机推荐
- EF Core 小技巧：迁移已经应用到数据库，如何进行迁移回退操作？
场景描述:项目中存在两个迁移 Teacher 和 TeachingPlan ,TeachingPlan 在 Teacher 之后创建,并且已经执行 dotnet ef database update ...
- Matlab+Qt开发笔记（二）：Qt打开mat文件显示读取的数据
前言 介绍了基础环境,最终是为了读取显示.mat文件,本篇读取mat文件并显示. 补充 测试的mat文件是double类型的. Matlab库数据类型 变量类型:matError,错误变量 ...
- 7-7 后缀式求值 (25分)的python实现
exp=input().split() ls=list() def Cal(a,b,i): if i=="+": return a+b elif i=="-": ...
- 一.Promise入门准备阶段
一.Promise入门准备阶段 1.区别实例对象呵函数对象 2.两种类型的回调函数(同步与异步) 2.1 同步回调 2.2 异步回调 3.JS的error处理 3.1 错误的类型 3.2 错误处理与错 ...
- go微服务框架Kratos笔记（六）链路追踪实战
什么是链路追踪 借用阿里云链路追踪文档来解释 分布式链路追踪(Distributed Tracing),也叫 分布式链路跟踪,分布式跟踪,分布式追踪 等等,它为分布式应用的开发者提供了完整的调用链路还 ...
- Python 练习 人事管理
人事管理系统介绍:1.展示页面: ①首页: ==========欢迎来到简历管理系统v2.1.1========== 1.管理员登录 ...
- SpringCloud 2020.0.4 系列之 Stream 消息出错重试 与 死信队列 的实现
1. 概述 老话说的好:出错不怕,怕的是出了错,却不去改正.如果屡次出错,无法改对,就先记下了,然后找援军解决. 言归正传,今天来聊一下 Stream 组件的 出错重试 和 死信队列. RabbitM ...
- python实现超大图像的二值化方法
一,分块处理超大图像的二值化问题 (1) 全局阈值处理 (2) 局部阈值 二,空白区域过滤 三,先缩放进行二值化,然后还原大小 np.mean() 返回数组元素的平均值 np.std() 返回数 ...
- [bzoj1416]神奇的口袋
容易发现操作任意次并不会改变每一个点的概率(因为每一个点加d的概率相同,期望与原数成比例),然后直接输出即可(要用高精度) 1 #include<bits/stdc++.h> 2 usin ...
- poi上传下载
本教程只实现poi简单的上传下载功能,如需高级操作请绕行! <!--poi start--> <dependency> <groupId>org.apache.po ...