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)的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  4. 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 ...

  5. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  6. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  7. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  8. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  9. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  10. Vue基础及脚手架环境搭建

    From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

随机推荐

  1. Codeforces Global Round 2 D 差分 + 前缀和 + 二分

    https://codeforces.com/contest/1119/problem/D 题意 有n个数组,每个数组大小为\(10^{18}+1\)且为等差数列,给出n个数组的\(s[i]\),q次 ...

  2. Redis删除特定前缀key的优雅实现

    还在用keys命令模糊匹配删除数据吗?这就是一颗随时爆炸的炸弹! Redis中没有批量删除特定前缀key的指令,但我们往往需要根据前缀来删除,那么究竟该怎么做呢?可能你一通搜索后会得到下边的答案 re ...

  3. [LeetCode] 753. Cracking the Safe 破解密码

    There is a box protected by a password. The password is n digits, where each letter can be one of th ...

  4. mac 浏览器(chrome, safari)信任自签名证书

    mac 浏览器(chrome, safari)信任自签名证书 自签名证书创建了一个 https 服务器,但是浏览器访问的时候总是不信任证书,感觉很烦,就想如果信任这个证书就不会有问题了. 方法1: 直 ...

  5. [原创]浅谈在创业公司对PMF的理解

    [原创]浅谈在创业公司对PMF的理解 在创业时,大多数人都常谈一个词叫"MVP“,但PMF谈的比较少,PMF在创业公司尤为重要,以下谈谈个人一些看法. 1.什么是PMF? 创业公司:一种是找 ...

  6. Tomcat启用HTTPS协议配置过程

    Article1较为简洁,Article2较为详细,测试可行. Article1 概念简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问 ...

  7. 基于opencv+python的二维码识别

    花了2天时间终于把二维码识别做出来了,不过效果一般,后面会应用在ROS辅助定位上,废话少说先上图: 具体过程参考了这位大神的博客:http://blog.csdn.net/qq_25491201/ar ...

  8. crushmap磁盘智能分组

    目录 简介 配置crush class 1. 创建ssd class 2. 创建基于ssd的class rule 3. 创建基于ssd_rule规则的存储池 4. 测试基于ssd的池 简介 ceph从 ...

  9. MySQL子查询结果集是否有记录

    Mark SELECT tu.id userId, tu.avatar_url avatarUrl, tu.wx_nick_name wxNickName, tu.city city, (select ...

  10. Ajax 跨域请求,Chrome 无法显示 Set-Cookie

    在使用 Ajax 进行跨域请求时,前后端均已设置 withCredentials = true,但 Chrome 前端响应无法显示 Set-Cookie. 一开始以为 Cookie 并没有设置成功,但 ...