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 ...
随机推荐
- Linux 服务器的基本性能及测试方法
1. 摘要 一个基于 Linux 操作系统的服务器运行的同时,也会表征出各种各样参数信息.通常来说运维人员.系统管理员会对这些数据会极为敏感,但是这些参数对于开发者来说也十分重要,尤其当程序非正常工作 ...
- SQL注入之猫舍
第一步:先查看是否存在注入点:构造?id=1 and 1=1 回车后发现页面正常 构造?id=1 and 1=2 发现页面异常,得出结论:存在注入点 第二步:判断字段数 当输入order by 1和o ...
- 自定义实例默认值 axios.create(config)
自定义实例默认值 axios.create(config) 根据指定配置创建一个新的axios,也就就每个新 axios 都有自己的配置 新 axios只是没有取消请求和批量发请求的方法,其它所有语法 ...
- PTA 7-1 公路村村通 (30分)
PTA 7-1 公路村村通 (30分) 现有村落间道路的统计数据表中,列出了有可能建设成标准公路的若干条道路的成本,求使每个村落都有公路连通所需要的最低成本. 输入格式: 输入数据包括城镇数目正整数N ...
- JDK 工具 HSDB 查看动态生成类
前置工作 1. 复制 JDK 安装目录\jre\bin\sawindbg.dll 到 JDK 安装目录同级的 jre\bin 目录下,否则会报错找不到 sawindbg.dll 文件. 比如我的 sa ...
- 树莓派4b安装Ubuntu20.04
树莓派4b安装Ubuntu20.04 下载Ubuntu20.04镜像 下载地址 安装Raspberry Pi Imager 下载地址 烧录系统 打开Raspberry Pi Imager,选择自己刚刚 ...
- [atAGC052F]Tree Vertices XOR
结论 注意到如果$x$周围有偶数个1,对$x$操作显然不会改变$a_{x}$,因此不妨强制操作的点周围要有奇数个1,不难发现此时恰好会改变该点,即令$a_{x}=a_{x}\oplus 1$ 称$\{ ...
- 对于cmd命令的一些常用用法
cmd命令是当今比较常见的主机命令,对于一些文件的执行和后台数据的控制有着比较有效的规范. 现在就讲几个比较常见的命令. IP查询 按住window+r 进入控制台,在输入cmd命令.在弹出的 cmd ...
- C/C++ Qt Tree与Tab组件实现分页菜单
虽然TreeWidget组件可以实现多节点的增删改查,但多节点操作显然很麻烦,在一般的应用场景中基本上只使用一层结构即可解决大部分开发问题,TreeWidget组件通常可配合TabWidget组件,实 ...
- Codeforces 348C - Subset Sums（根号分治）
题面传送门 对于这类不好直接维护的数据结构,第一眼应该想到-- 根号分治! 我们考虑记[大集合]为大小 \(\geq\sqrt{n}\) 的集合,[小集合]为大小 \(<\sqrt{n}\) 的 ...