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 ...
随机推荐
- 痞子衡嵌入式：在IAR开发环境下RT-Thread工程函数重定向失效分析
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是在IAR开发环境下RT-Thread工程函数重定向失效分析. 痞子衡旧文 <在IAR下将关键函数重定向到RAM中执行的方法> ...
- 关于新手使用mpb开发代码的一些小知识
mac 前端端口占用解决 1.查看8080端口,复制进程PID lsof -i :8080 2.杀死进程 kill -9 「进程PID」 如果你的mac不能使用sudo解决办法 错误提示 ...
- [hdu6990]Directed Minimum Spanning Tree
模板题:在有向图中,对每一个点求以其为根的最小(外向)生成树 (当图是强连通时)可以使用朱刘算法,算法过程如下: 1.对每一个节点,选择指向该点的边权最小的边,即得到一张子图 2.任选这张子图的一个简 ...
- 部署vue项目到Linux服务器
案例一 vue-cli构建vue3项目,将项目上传到Linux服务器,服务器安装node,并启动vue项目 首先本地有一个vue项目,启动后可正常访问 本地打包后,也可直接访问 若打包后的index. ...
- Java设计模式之（十一）——享元模式
1.什么是享元模式? Use sharing to support large numbers of fine-grained objects efficiently. 享元模式(Flyweight ...
- 如何使用Docker构建开发环境
我们在开发中都会遇到这样的问题:在本地开发好功能后,部署到服务器,或者其他人拉到本地接着开发时,会出现功能无法使用的情况. 这些异常情况,大多数时候是因为系统不同而导致的依赖差异.因此,为了解决这个问 ...
- AGC050B Three Coins
做的时候有思考到是否能转化成移动点问题,但是没有清晰的把他解释出来. NOIP的时候也一样,T3也有考虑到是否能转为差分,但是也没有清晰的写出来. 自己做题的时候应尽量保证草稿纸和思绪的清晰,而不是在 ...
- Redis概述以及Linux安装
Redis 概述 Redis是什么 Redis,Remote Dictionary Server,远程字典服务.是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.key-v ...
- AT695 マス目
AT695 マス目 本题选自 DP 优化方法大杂烩 状压部分. 这个题很 nb.下文记 \(n=H\),\(m=W\). 对于每一列,如果只记录一个格子是否为黑色,那么发现它无法处理从右边绕到左边再绕 ...
- Yii2 源码分析 入口文件执行流程
Yii2 源码分析 入口文件执行流程 1. 入口文件:web/index.php,第12行.(new yii\web\Application($config)->run()) 入口文件主要做4 ...