一 、安装 https://cn.vuejs.org/ 官方网站
二 、简单实用示例
Vue.js 使用了基于 HTML 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。
首先创建一个vue实例，并在创建实例的过程中传入一个对象。
该对象的第一个属性名为el，它的值是我们需要渲染的目标标签，我们通过属性查找定位这个标签。
该对象的第二个属性名为data，里面就是我们要渲染给浏览器标签的数据，
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>标题</title>
<script src="static/vue.min.js"></script> <!--引用vue--> </head>
<body> <div id="d1">
<h1>{{greeting}}</h1>
<h3>{{app}}</h3>
</div>
<script>
// 普通插入文本方法
// let d1 = document.getElementById("d1"); //获取元素
// d1.innerText = "hello word" // 文本添加上 hello word 文字 //数据模板引擎
// Vue插入文本方法
new Vue(
{
el: "#d1", // 获取元素
data: {
greeting: "hello word", //在元素内添加使用对应的key 之后就应用上value数据
app: "hello Vue" // 在元素内使用 相互对应
}
}
) </script>
</body>
</html>
简单示例
三 、常用指令
1.v-text
类似双大括号语法渲染数据的另一种方式是使用v-text。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>标题</title>
<script src="static/vue.min.js"></script> <!--引用vue-->
</head>
<body>
<div id="d1" v-text="greeting"></div>
<!--使用指令 插入文本-->
<script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的 new Vue({
el: "#d1", // 获取元素
data: {
greeting: "Hello Vue",
}
})
</script> </body>
</html>
v-text
2. v-html
双大括号语法无法渲染HTML标签，我们需要使用v-html。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>标题</title>
<script src="static/vue.min.js"></script> <!--引用vue-->
</head>
<body>
<div id="d1" v-html="greeting"></div>
<!--使用指令 插入文本-->
<script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的 new Vue({
el: "#d1", // 获取元素
data: {
greeting: "<h1>Hello Vue</h1>",
}
})
</script> </body>
</html>
v-html
3.v-for
接下来，我们看看数组和对象使用for的渲染方式。
<div id="d1">
<ul>
<li v-for="i in ary">{{ i }}</li>
</ul>
<ul>
<li v-for="student in students">姓名：{{student.name }},年龄：{{ student.age }},爱好：{{ student.hobby }}</li>
</ul>
</div>
<!--使用指令 插入文本-->
<script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的 new Vue({
el: "#d1", // 获取元素
data: {
ary: ['我是1', '我是2', '我是3', '我是4'],
students: [
{
name: "学生1",
age: ,
hobby: '排球'
},
{
name: "学生2",
age: ,
hobby: '蓝球'
},
{
name: "学生3",
age: ,
hobby: '双色球'
},
],
}
})
</script>
v-for
4. v-if ，v-else-if ，v-else
渲染数据的时候，同样也可以使用条件判断，我们来看看。
<div id="d1">
<div v-if="role == 'mei_nv'"><h1>欢迎光临</h1></div>
<div v-else-if="role == 'big_mei_nv'"><h1>欢迎再次光临</h1></div>
<div v-else><h1>再见</h1></div> </div>
<!--使用指令 插入文本-->
<script> let vm = new Vue({
el: "#d1", // 获取元素
data: {
// role: "mei_nv", // 第一次 展示 欢迎光临
// role: "big_mei_nv", // 第二次 展示 欢迎再次光临
// role: "no", // 第三次 展示 再见
}
})
</script>
v-if
通过上面的代码我们可以看出，v-if的作用是控制标签的显示，它通过判断添加标签，底层采用的是appendChild来实现的，下面我们来看一个同样也是控制标签显示的另一个指令v-show。
5. v-show
<div id="d1" v-show="greeting">看见我了没？</div>
<!--使用指令 插入文本-->
<script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的 let vm = new Vue({
el: "#d1", // 获取元素
data: {
// greeting: true, // 在页面展示出来了
// greeting: false // 在页面展示不出来
// greeting: 1, // 在页面展示不出来
greeting: // 在页面展示不出来
}
})
</script>
v-show
与v-if不同的是，v-show通过样式的display控制标签的显示。
6.v-if 和v-show对比
v-if和v-show的性能比较
我们简单比较一下二者的区别： 实现方式：v-if底层采用的是appendChild来实现的，v-show通过样式的display控制标签的显示，正因为实现方式上面有差异，导致了他们的加载速度方面产生了差异； 加载性能：v-if加载速度更快，v-show加载速度慢 切换开销：v-if切换开销大，v-show切换开销小 v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-show 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。
对比
7. v-bind
绑定属性，不多说了，注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>标题</title>
<script src="static/vue.min.js"></script> <!--引用vue--> <style>
.active {
width: 500px;
height: 500px;
background-color: blue;
}
</style> </head>
<body>
<div id="d1"> <a v-bind:href="baidu">跳转百度</a> <!--绑定一个连接给按标签的连接--> <div v-bind:class="[isActive]"></div>
<!--给添加一个类 类名就是对应的数据 -->
</div> <script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的 let vm = new Vue({
el: "#d1", // 获取元素
data: {
baidu: "https://www.baidu.com/",
isActive: "active"
}
})
</script> </body>
</html>
v-bind
8. v-on
另一个非常重要的指令是v-on，使用v-on我们可以在标签上面绑定事件，注意我们新建的vue实例app01中多了一个属性，methods，在methods中，是我们具体事件的实现方式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>标题</title>
<script src="static/vue.min.js"></script> <!--引用vue--> <style>
.active {
color: green;
}
</style> </head>
<body>
<div id="d1">
<h1 v-bind:class="{active:isActive}">点击下边这个按钮查看颜色</h1>
<button v-on:click="changeColor">点击切换颜色</button>
<!--点击执行changeColor对应的函数-->
</div> <script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的 let vm = new Vue({
el: "#d1", // 获取元素
data: {
isActive: false // true 就变绿色字体 false就是黑色 },
methods:{
changeColor: function () {
this.isActive = !this.isActive // 点击让他变成非真或者非假
}
}
})
</script> </body>
</html>
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on</title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<!--方式一-->
<a v-bind:href='link'
v-bind:class="{active: isActive}"
v-on:click="myClick"
v-on:mouseenter="mouseEnter"
@mouseleave="mouseLeave">去百度</a>
<!--方式二-->
<button v-on="{click: myClick,
mouseenter: mouseEnter,
mouseleave: mouseLeave}">
点我今晚吃鸡~~~
</button>
</div> <script>
// 绑定属性，简写冒号：
let app01 = new Vue({
el: "#app01",
data: {
// urls: {
// url: "https://www.baidu.com",
// name: "百度"
// },
link: "https://www.baidu.com",
isActive: false
},
methods: {
myClick: function () {
// this.isActive = true;
console.log("大吉大利，今晚吃鸡~~~")
},
mouseEnter: function () {
console.log("鼠标来了~~~");
},
mouseLeave: function () {
console.log("鼠标走了~~~");
}
}
})
</script> </body>
</html>
v-on test
9.v-model
上面演示的是通过vue实例将数据渲染进模板，并且在控制台，我们修改数据之后，修改后的数据能够及时（官方称之为响应式）的渲染到模板层，那么，如果有这样的需求，比如有一个input标签，当用户修改渲染的原始数据后，打印修改后的数据，简单说，我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改，同时我们还需要监听用户行为，如果用户在标签上面修改了数据（之前的修改，指的是通过vue实例app01进行的数据修改），我们需要获取到数据，针对这个需求，我们可以使用v-mode指令。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>标题</title>
<script src="static/vue.min.js"></script> <!--引用vue--> </head>
<body>
<div id="d1"> <!--都用上指令v-model（响应式渲染）-->
<input type="text" v-model="name"> <input type="checkbox" value="男" v-model="sex">
<input type="checkbox" value="女" v-model="sex"> <select v-model="num">
<option>1选择1</option>
<option>2选择2</option>
<option>3选择3</option>
</select> <hr>
<!--把数据空值写到页面上-->
{{name}}
{{sex}}
{{num}}
<!--通过填写上边的数据 ，实施展示出来--> </div> <script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的 let vm = new Vue({
el: "#d1", // 获取元素
data: {
name:"",
sex:[],
num:[], }
})
</script> </body>
</html>
v-model
10. 计算和装饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app01">
<table border="">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python基础</td>
<td><input type="text" v-model.number="python"/></td>
<!--装饰符 number-->
</tr>
<tr>
<td>前端</td>
<td><input type="text" v-model.trim="web"/></td>
<!--装饰符 trim-->
</tr>
<tr>
<td>Django</td>
<td><input type="text" v-model.lazy="django"/></td>
<!-- 装饰符 lazy-->
</tr>
<tr>
<td>总分</td>
<td>{{ python + web + django }}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{ avgScore }}</td>
</tr>
</tbody>
</table>
</div> <script>
// 计算属性放在缓存当中，只有数据修改时才重新计算
let app01 = new Vue({
el: "#app01",
data: {
python: ,
web: ,
django:
},
computed: {
// 计算属性需用到computed
sumScore: function () {
return this.python + this.web + this.django;
},
avgScore: function () {
return this.sumScore/;
}
}
})
</script> </body>
</html>
计算属性和装饰符
11.watch 侦听
<div id="app">
<table border="">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python</td>
<td><input type="text" v-model="python"/></td>
</tr>
<tr>
<td>Vue</td>
<td><input type="text" v-model="vue"/></td>
</tr>
<tr>
<td>Go</td>
<td><input type="text" v-model="go"/></td>
</tr>
<tr>
<td>总成绩</td>
<td>{{ sumScore }}</td>
</tr>
</tbody>
</table>
<hr>
{{ python }}
{{ vue }}
{{ go }}
{{ sumScore }}
</div> <script>
// v-model 响应式
let vm = new Vue({
el: "#app",
data: { //对象 即 数据
python: ,
vue: ,
go:
},
computed: { // 使用计算的时候用computed
sumScore: function () {
console.log();
return this.python + this.vue + this.go;
},
},
watch: { //侦听
python: function () {
alert(this.python);
// 修改python分数时候就会弹窗（实时侦听）
}
}
})
</script>
侦听
12.获取DOM元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="./static/vue.min.js"></script>
<style>
.active {
color: red;
}
</style>
</head>
<body> <div id="app">
<div ref="myRef">Peiqi</div>
<!--写上ref="myRef" vue 对应会对一个属性-->
<button v-on:click="changeColor">点击让佩奇变绿</button>
</div> <script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的
let vm = new Vue({
el: "#app",
data: {
isActive: 'active',
},
methods: {
// 点击按钮 或执行 methods下的 函数 changecolor 函数
changeColor: function () {
// this 就是这个vue实例
console.log(this);
this.$refs.myRef.className = this.isActive;
//会多一个直接用 $refs调用myRef属性
// 让 class的name等于 vue实例中的isActive
}
}
})
</script> </body>
</html>
获取DOM元素
13.自定义指令
自定义指令的参数有：
- el: 指令所绑定的元素，可以用来直接操作 DOM 。
- binding: 一个对象，包含以下属性：
- name: 指令名，不包括
v-前缀。 - value: 指令的绑定值，
- oldValue: 指令绑定的前一个值，仅在
update和componentUpdated钩子中可用。无论值是否改变都可用。 - expression: 绑定值的字符串形式。
- arg: 传给指令的参数。
- modifiers: 一个包含修饰符的对象。
- name: 指令名，不包括
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<style>
.box1{
width: 200px;
height: 200px;
border:solid 1px green;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<div class="box1" v-pos.right.bottom="fix"></div>
<button v-on:click="position">点击定位</button>
</div>
<script>
// 自定义指令“pos”
Vue.directive("pos",function (el,bindding) { console.log(el); // el 绑定指令的元素 <div class="box1"></div>
console.log(bindding); // bindding 是一个对象{即} let modifiers = bindding.modifiers; // bindding.modifiers 自定义指令修饰符 {right: true, bottom: true}
if (bindding.value){ // bindding.value 自定义指令的值
el.style.position = 'fixed';
for (let key in modifiers){
el.style[key] = 0;
}
}else {
el.style.position = 'static'
}
}); const app = new Vue({
el:'#box',
data:{
fix:false
},
methods:{
position:function () {
this.fix = !this.fix
}
} })
</script>
</body>
</html>
自定义指令
Vue初始的更多相关文章
-
2. Vue - 初始
一.vue简单介绍 1. vue定义 vue是一套用于构建用户界面的渐进式框架.vue被设计为可自底向上逐层应用,vue的核心只关注视图层:vue的特点是数据驱动视图,可直接修改数据,不用再手动编 ...
-
1.Vue初始及相关Vue核心组件
1.Vue官方文档 官网文档:https://cn.vuejs.org/v2/guide/ 2.Vue-cli官方文档(脚手架) 官网文档:https://cli.vuejs.org/zh/guide ...
-
Vue的安装及使用快速入门
一.安装vue 1.安装node.js,安装完node.js之后,npm也会自动安装 查询是否安装成功的命令: node -v npm -v 2.全局安装脚手架工具vue-cli,命令如下: npm ...
-
vue与TypeScript集成配置最简教程
https://blog.csdn.net/u014633852/article/details/73706459 https://segmentfault.com/a/119000001187808 ...
-
vue源码阅读（二）
一 一个实例 如果简单了解过些Vue的API的话,肯定会对一下这个特别熟悉,在上一篇里,分析了Vue的核心文件core的index.js构造vue函数执行的流程. 那么下边这个则是实例化构造函数,也就 ...
-
编程小白入门分享四：Vue的安装及使用快速入门
一.VUE简介 vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立 ...
-
TypeScript从入门到Vue项目迁移
1. 前言 ES6的普及,大大简化了JavaScript的表达方式 大型项目中,js没有类型检查.表达方式灵活,多人协作代码调试和维护成本高 2. 定义 TypeScript 是 JavaScript ...
-
#学习笔记#e2e学习使用（二）
前言: <#学习笔记#e2e学习使用(一)>主要记录了Vue项目的创建到e2e环境的搭建,以及期间遇到的各种问题和解决方法.本文建立在基础测试环境搭建完毕能正确运行的情况下,编写测试代码, ...
-
Element-ui安装与使用（网站快速成型工具）
我之所以将Element归类为Vue.js,其主要原因是Element是(饿了么团队)基于MVVM框架Vue开源出来的一套前端ui组件.我最爱的就是它的布局容器!!! 下面进入正题: 1.Elemen ...
随机推荐
-
CentOS 6/7安装ffmpeg
环境 CentOS 6/7 安装 导入GPG key rpm --import http://packages.atrpms.net/RPM-GPG-KEY.atrpms 安装ATRPMS Repo ...
-
linux系统运维常用基本命令详解
1.ls 文件属性: -:普通文件 d:目录文件 b:块设备 c:字符设备文件 l:符号连接文件 p:命令管道 s:套接字文件 文件权限: 9位数字,每3位一组 文件硬链接次数 ...
-
Docker 清理命令集锦
杀死所有正在运行的容器 复制代码代码如下: docker kill $(docker ps -a -q) 删除所有已经停止的容器 复制代码代码如下: docker rm $(docker ps -a ...
-
c++ template
在类中其中一个函数使用模板,函数定义和实现必须放在头文件里. ca.h template<typename T> void swap2(T &a,T &b) { T c=a ...
-
利用Hive实现求两条相邻数据时间差
1.Hive row_number() 函数的高级用法 row_num 按照某个字段分区显示第几条数据 select imei,ts,fuel_instant,gps_longitude,gps_la ...
-
apk代码的破解
方法一:dexdump方法(效果很不好,推荐指数*) 1.搜索到dexdump.exe所在目录: 2.将apk包中的**.dex文件存放到上面目录: 3.命令行中进入上面目录,执行:dexdump ...
-
poj 2309 BST 使用树阵lowbit
假设领悟了树阵lowbit,这个问题很简单,底部是奇数,使用lowbit(x)寻找x父亲,然后x父亲-1是的最大数量 至于lowbit问题是如何计算,寻找x父亲,事实上x+2^x二进制结束0的数量. ...
-
spring 入门级程序示例
public interface Action { public String execute(String str); } 接口 public class UpperAction implement ...
-
团队作业7——Beta版本冲刺计划及安排
上一个阶段的总结: 在Alpha阶段,我们小组已近完成了大部分的功能要求,小组的每一个成员都发挥了自己的用处.经过了这么久的磨合,小组的成员之间越来越默契,相信在接下来的合作中,我们的开发速度会越来越 ...
-
[方案]基于Zynq WiFi方案构建
基于Zynq系列,搭建无线传输平台 1) 2.4G 2) 5G AC