Vue初始
一 、安装 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 ...
随机推荐
- linux用户
hen we are travelling, we find ourselves in new places and new spaces, physically and internally; it ...
- laravel 分类的列表查询
public function index(Request $request, ResponseFactoryContract $response, QuestionModel $questionMo ...
- Kali安装问题解决方案
一.对今天安装Kalilinux 失败的原因做一个简单的总结, 1.安装之前的电脑状况,电脑配置Windows7 64位旗舰版配置,虚拟版本是VMware Workstation Pro14 ver ...
- bzoj 2761
神题... 其实这题巨水,用各种诡异的方法都能A,包括STL等等 我之所以写题解,是因为我发现了一个bug:bz和luogu时限有问题! 这题我用了两种做法: ①:直接使用STL-map(不能直接用数 ...
- Java 获取当前系统的时间
获取当前系统的时间,每隔一秒,打印一次. import java.util.Date; public class TestDate { public static void main(String[] ...
- C++ gethostname()
使用“gethostname();”获取计算机名,先看源码: 在Code::Blocks 16.01中,设置project的Build options...,Debug > Linker set ...
- Windows Internals 笔记——线程局部存储区
1.由于C/C++运行库是在多线程应用程序出现的许多年前设计的,因此运行库中的大多数函数是为单线程应用程序设计的. 2.当应用程序第一次调用_tcstok_s的时候该函数将传入的字符串地址保存在它自己 ...
- Canvas锯齿问题
canvas的宽高必须通过HTML属性指定,不能通过CSS指定,否则会有锯齿 这个是通过CSS定义宽高,绘制的图形 #myCanvas{ background: black; height: 800p ...
- loss函数学习笔记
一直对机器学习里的loss函数不太懂,这里做点笔记. 符号表示的含义,主要根据Andrew Ng的课程来的,\(m\)个样本,第\(i\)个样本为\(\vec x^{(i)}\),对应ground t ...
- KnockoutJs学习笔记（五）
作为一名初学者来说,一篇篇的按顺序看官网上的文档的确是一件很痛苦的事情,毕竟它的排列也并非是由浅及深的排列,其中的顺序也颇耐人寻味,于是这篇文章我又跳过了Reference部分,进而进入到具体的bin ...