vue - 基础(1)
Vue基本用法
在学习Vue的基本用法之前,我们先简单的了解一些es6的语法
let:
特点:1.局部作用域 2.不会存在变量提升 3.变量不能重复声明
const:
特点:1.局部作用域 2.不会存在变量提升 3.不能重复声明,只声明常亮,不可变的量(因为是常量所以在初始化的时候就要赋值)
模板字符串:
tab键上面的反引号 ${变量名}来插值
let name = "xiaoming"
let str = `我是${name}`
箭头函数
function(){} == () => {} this的指向发生了改变
let add = function (x) {
return x
};
console.log(add(6)); let add = (x) => {
return x
};
console.log(add(30))
es6的类
原型 prototype 当前类的父类(继承性)
function Vue(name,age) {
this.name = name;
this.age = age
}
Vue.prototype.showName = function () {
console.log(this.name)
};
var vue = new Vue("xiaoming",18);
vue.showName()
Vue的介绍
前端的三大框架:
vue:尤雨溪,渐进式的JavaScript框架
react:Facebook公司,里面的高阶函数非常多,对初学者不友好
angular:谷歌公司,目前更新到6.0,学习angular需要typescript
vue的基本引入和创建
1.下载
cdn方式:
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
2.引包
<script src='./vue.js'></script>
3.实例化
<div id="app">
<!--模板语法-->
<h2>{{ msg }}</h2>
<h3>{{ "hahaha" }}</h3>
<h3>{{ 1+1 }}</h3>
<h4>{{ {"name":"haha"} }}</h4>
<h5>{{ person.name }}</h5>
<h2>{{ 1>2? "真的":"假的" }}</h2>
<p>{{ msg2.split("").reverse().join("") }}</p>
<div>{{ text }}</div>
</div>
<!--引包-->
<script src="./vue.js"></script>
<script>
//实例化对象
new Vue({
el:"#app",//绑定标签
data:{
//数据属性
msg:"黄瓜",
person:{
name:"xiaoming"
},
msg2:"hello Vue",
text:"<h2>日天</h2>"
}
})
</script>
vue - 基础(1)的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- 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 ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
随机推荐
- 洛谷P3232[HNOI2013]游走
有一个无向简单连通图,顶点从 \(1\) 编号到 \(n\),边从 \(1\) 编号到 \(m\) 小Z在该图上进行随机游走,初始时小Z在\(1\)号顶点,每一步小Z以相等的概率随机选 择当前顶点的某 ...
- Shell脚本是什么、它是必需的吗?
一个Shell脚本是一个文本文件,包含一个或多个命令.作为系统管理员,我们经常需要使用多个命令来完成一项任务,我们可以添加这些所有命令在一个文本文件(Shell脚本)来完成这些日常工作任务.
- thinkphp5.0 - nginx 配置
上面介绍的是 thinkphp url 的访问方式,按照上面的访问方式配置nginx服务器配置,如下所示: server { listen 8090; server_name localhost 17 ...
- MySQL基本数据类型和约束方式
常用数据类型 1.mysql中的基本数据类型 整型.浮点型.字符类型.日期类型.枚举和集合. 2.常用的约束条件 PRIMARY KEY.UNIPUE KEY.NOT NULL.FOREIGN KEY ...
- pyqt 调用QT设计师创建的对话框
一.实验环境 1.Windows7x64_SP1 2.anaconda2.5.0 + python2.7(anaconda集成,不需单独安装) 3.pyinstaller3.0 二.实验步骤 2.1 ...
- firefly rk3399 增加 HL-340 驱动(编译内核)
前言:新下载了firefly rk3399 ubuntu固件16.04,但是发现没有HL-340 USB转串口的驱动,而机器人底盘驱动是HL-340的,所以一直提示无法找到设备驱动. 由于没有技术支持 ...
- python 进程数据通信
进程通信的第一种方式from multiprocessing import Process,Queue def f(q): q.put([42,2,'hello']) print('zi q id:' ...
- linux php composer安装和使用教程
linux php composer安装和使用教程建议在linux下 下载后 然后再下载到本地 win上最好别用composer下载速度超级慢 或者根本下不动 项目依赖包 ...
- Go排序练习
1.插入排序 类似扑克起牌,每起一张牌都按大小将牌放到合适的位置 package main import "fmt" func insert(a []]int { for i := ...
- 【linux】lvm扩展根分区
lvm扩展根目录 1.lvm的基本概念 physical volume (PV) 通常是一快硬盘.相当于一个物理设备,磁盘空间物理卷PV. volume group (VG) 相当于LVM的卷组,属于 ...