vue基本语法 JS补充
一、VUE框架入门
1. vue框架的优势
- 前端框架有：angular，react，vue
- vue有前面两发框架的优势，去除了他们的缺点，但没有前面俩个框架健全。
- vue的优点：中文的API，单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想（相比于原生JS的DOM驱动）
- 数据驱动思想：即采用变量来替代原来的各种原生DOM操作，且变量是保存在内存中，即我们进行的是虚拟DOM，这样不但减少了IO操作，还提高了网页的浏览效率，降低了服务端压力。
二、VUE框架的基本使用
1. vue的引用
- 同
Bootstrap一样，vue也是需要下载后导入到要编辑的html页面中使用- vue的导入：
- 官方文档下载
- 通过
script标签导入vue.js环境 - 通过
el挂载
- vue的导入：
2. vue的基本语法结构
- 注意：
vue不能挂载body标签和html标签
<script>
new Vue({
el: '#app', // el 用来挂载标签，挂载标签后，该标签内的所有子标签中的变量都可以找到。一般一个页面只挂载一个标签 注意：vue 不能挂载body标签和html标签
data: {
msg: 'message', // data 用来给页面上的变量赋值，格式是：变量名:变量值 （变量名不需要加双单引号，除非当表里名时关键字，要加双单引号）
},
methods: { // method 用来书写方法，
pClick: function () {
this.msg = '信息'
}
}
})
</script>
2. 插值表达式
<!--语法-->
{{ }}
// 例子：
<!--为空时-->
<p>{{ }}}</p>
<!--有值时-->
<p>{{ 变量名 }}}</p>
- 当双大括号内为空时，双大括号中间必须要有一个空格，不然会当做普通文本渲染成
{{}}，有空格才会正常被解析。
3. 文本指令
- 文本指令指的是，我们赋给变量的值是被解析成html格式数据，还是解析成普通文本，以及解析的次数。
（1）v-text
- 不能解析html语法的文本，会原样输出
<p v-text="info"></p> <!--最后浏览器上展示的是 <i>info</i> -->
<script>
new Vue({
el: '#app',
data: {
info: '<i>info</i>'
},
})
</script>
（2）v-html
- 能解析html语法的文本
<p v-html="info"></p> <!--最后浏览器上展示的是斜体的 info -->
<script>
new Vue({
el: '#app',
data: {
info: '<i>info</i>'
},
})
</script>
（3）v-once
- 处理的标签内容只能被解析一次
<p v-on:click="pClick" v-once>{{ msg + info }}</p> <!--此处在浏览器上展示的内容始终是 message我们的 ，因为在浏览器第一次展示时，就已经解析过一次该文本了，所以之后无论发生什么变化，msg + info 的值都是显示最初的值-->
<script>
new Vue({
el: '#app',
data: {
msg: 'message',
info: '我们的'
},
methods: {
pClick: function () {
this.msg = '信息'
}
}
})
</script>
4. 方法指令
- 方法指令是指在标签中绑定的各种事件
（1）v-on:事件="变量名"
方法指令可以简写成：
@事件="变量名"@事件="变量()"@事件="变量($event, ...)"
当变量名不加括号时，vue会自动传一个参数：事件对象（
$event）当变量名加括号时，代表自定义传参，系统不再自动传入事件对象，但我们也可以手动传。
事件绑定后，在
vue的methods中进行书写事件的内容。下面包含点击事件（
click），鼠标悬浮事件（mouseover）和鼠标移动（mousemove）、鼠标离开事件（mouseout）、鼠标按下不放事件（mousedown）、鼠标抬起事件（mouseup）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--
事件指令： v-on:事件名="方法变量"
简写： @事件名="方法变量"
-->
<p v-on:click="f1">{{ msg }}</p>
<p @click="f1">{{ msg }}</p>
<hr>
<!--mouseover mouseenter | mouseout mouseleave-->
<p @mouseover="f2" @mouseout="f3" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
<hr>
<!-- 事件变量，不添加()，默认会传事件对象: $event -->
<!-- 事件变量，添加()，代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象 -->
<p @click="f8($event, '第一个')">{{ info }}</p>
<p @click="f8($event, '第二个')">{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '点击切换',
action: '鼠标事件',
info: '确定点击者'
},
methods: {
f1 () {
this.msg = '点击了'
},
f2 () {
this.action = '悬浮';
console.log('悬浮')
},
f3 () {
this.action = '离开'
},
f4 () {
this.action = '按下'
},
f5 () {
this.action = '抬起'
},
f6 () {
this.action = '移动';
console.log('移动')
},
f7 () {
this.action = '右键';
},
f8 (ev, argv) {
console.log(ev, argv);
this.info = argv + '点击了';
}
}
})
</script>
</html>
5. 属性指令
（1）v-bind:属性名="变量名"
属性指令也可简写成：
:属性名="变量名"属性指令可以对标签添加任意的属性
添加普通属性：
:title="t1"添加类属性：
:class="c1" 或 :class="[c1, c2]" 或 :class="['c1', c2]" 或 :class="{c1: true}"- 上面的添加类属性时，若变量名被双单引号引住时，那么在vue中，不用再对该变量进行赋值，该变量的变量值就是它本身，可以直接使用
- 上面添加类属性的最后一种方式表示当c1对应的是true时，c1类生效，当c1对应的是false时，c1类不生效
添加样式属性：
:style="s1" 或 :style="{color: c1, fontSize: f1}"
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: orange;
}
.d2 {
border-radius: 50%;
}
.d3 {
border-radius: 20%;
}
</style>
</head>
<body>
<div id="app">
<!--属性指令： v-bind:属性名="变量"
简写： :属性名="变量"
-->
<p style="color: red" class="dd1" abc="def" title="悬浮提示">红色字体</p>
<!--1、简单使用-->
<p v-bind:title="pTitle" :abc="def" @click="changeImg">简单使用</p>
<!--<img :src="img_src" alt="">-->
<!--2、class属性绑定-->
<!--c1变量的值就是类名-->
<p :class="c1"></p>
<!--多类名可以用[]语法，采用多个变量来控制-->
<p :class="[c2, c3]"></p>
<!--选择器位可以设置为变量，也可以设置为常量-->
<p :class="['d1', c4]"></p>
<!--{类名: 布尔值}控制某类名是否起作用-->
<!--<p :class="{x1: false}"></p>-->
<!--多种语法混用 *****************类似开关灯示例***********************-->
<p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>
<!--3、style属性绑定(了解)-->
<p :style="myStyle">样式属性</p>
<p :style="{width: w,height: h, backgroundColor: bgc}">样式属性</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
pTitle: '简单使用',
def: '自定义属性',
img_src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
c1: 'd1 d2',
c2: 'd1',
c3: 'd3',
c4: 'd3',
is_true: true,
myStyle: {
width: '100px',
height: '100px',
backgroundColor: 'red'
},
w: '200px',
h: '100px',
bgc: 'green'
},
methods: {
changeImg() {
this.img_src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
}
}
})
</script>
</html>
6. 斗篷指令
- 斗篷指令的作用是防止页面闪烁。因为，代码的加载和解析是从上到下的，有时候，标签中的内容有些需要vue加载完后才会展示出来，这使，就可能出现页面闪烁。
- 斗篷指令原理：当加载到让含有
v-cloak的标签时，先进行隐藏，等其中的vue相关执行完后，再进行展示。 - 用法
<style type="text/css">
[v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
{{ msg }}
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "message"
}
})
</script>
<!-- 避免页面闪烁-->
三、JS补充
- 箭头函数和function普通函数和面向对象的方法之间的区别
1. 首先他们的定义方式不同
// 普通function函数
function f1() {
console.log("Hello world!");
}
// 箭头函数
var 函数名 = (形参) => 返回值
// 如
var f = () => 5;
// 面向对象的方法（如下 fn）
methods: {
fn () {
// axios插件
let _this = this;
this.$axios({
url: '',
method: 'get',
data: {
},
})
}
}
2. 他们内部的this方法作用不同
- 箭头函数内部的
this方法会去找他的上一级的对象（如本箭头函数为ff，obj1.obj2.ff,那么ff内部的this就是obj1） - 普通
function函数和面向对象的方法内部的this方法会去从当前往上面找，找到一个对象就停下（即这两个的this表示调用本函数或本方法的对象）。
vue基本语法 JS补充的更多相关文章
- （day67）组件、组件化、组件传参、JS补充（命名转换、for in 、数据转换）、css取消选中和模拟小手
目录 一.初识组件 (一)概念 (二)特点 二.组件的分类 (一)根组件 (二)局部组件 (三)全局组件 二.数据组件化 三.组件的传参 (一)父传子 (二)子传父 四.JS补充 (一)与html命名 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue模板语法(二)
Vue模板语法(二) 样式绑定 class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...
- Vue模板语法(一)
Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...
- Vue模板语法（一）
Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
- 一、vue基础--语法
用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...
- 一、vue基础语法（轻松入门vue）
轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
随机推荐
- JS 获取当前定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 新浪随机图片壁纸API接口 刷新网页换背景接口
刷新一次页面换一次图片,可以调用到你的网站背景里面去,多炫酷啊,刷新一下本页看下效果哦. 说明:随机图片壁纸api,调用的是新浪api,速度不用担心,图片资源也很多 电脑动漫图片:http://api ...
- Tesseract机器识别
1.合并图片打开jtessboxeditor,点击Tools->Merge Tiff ,按住shift键选择前文提到的101个tif文件,并把生成的tif合并到新目录d:\python\lnyp ...
- Git 入门：概念、原理、使用
出处: git入门:概念.原理.使用 git和Github 概念 Git --- 版本控制工具(命令). git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.git ...
- 深入理解计算机系统 第十一章 网络编程 part2 第二遍
客户端和服务器通过因特网这个全球网络来通信.从程序员的观点来看,我们可以把因特网看成是一个全球范围的主机集合,具有以下几个属性: 1.每个因特网主机都有一个唯一的 32 为名字,称为它的 IP 地址 ...
- 怎样在 Vue 里面绑定样式属性 ?
在 Vue 里绑定样式属性可以使用 v-bind:class="" 和 v-bind:style="" , 二者都可以接受 变量 / 数组 / 对象. 不同点是 ...
- 21-Perl 发送邮件
1.Perl 发送邮件如果你的程序在 Linux/Unix 系统上运行,你就可以在 Perl 中使用 sendmail 工具来发送邮件.以下是一个简单的脚本实例用于发送邮件:#!/usr/bin/pe ...
- 7.bash作业控制
7.作业控制本节讨论作业控制是什么.它怎么工作.以及 Bash 里面怎么使用这些功能7.1 作业控制基础作业控制是指有选择的停止(暂停)并在后来继续(恢复)执行某个进程的能力.通常,用户通过 Bash ...
- 版本控制工具SVN学习
教学视频链接:https://edu.aliyun.com/course/83?spm=5176.10731334.0.0.778e6580zC0Ri0 版本控制工具SVN学习 1,SVN的简介 在实 ...
- 【ES6 】var/let/const的区别
var 声明变量 没有区级作用域 可以预解析 可以重复定义 声明的全局变量属于顶层对象(window)的属性 let 声明变量 有块级作用域 没有预解析 不可以重复定义 声明的全局变量不属于顶层对象( ...