学习vue_01
vue 框架：
--构建虚拟的DOM结构，（内存内改变对象）- 操作数据的变化
框架介绍
可以独立完成前后端分离式web项目的JavaScript框架
优点：
三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM
可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发
特点：
单页面web应用
数据驱动
数据的双向绑定
虚拟DOM
使用vue框架：
下载：https://cn.vuejs.org/v2/guide/installation.html
开发版本: 包含完整的警告和调试模式 (.js)
生产版本: 删除了警告 （min.js）
引入：
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 包含了有帮助的命令行警告 或
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 优化了尺寸和速度
官网学习(api):
https://cn.vuejs.org/v2/api/
基础格式
基本结构：
<script src="js/vue.js"></script> // 导入vue 环境
<script>
new Vue({
el: "#app",
data: {
showBtn: true
},
methods: {
handleClick: function() {
console.log("Clicked!");
}
}
});
</script>
el : 指定dom标签容器的选择器
Vue就会管理对应的标签及其子标 （body,html除外）
data: 对象或函数类型
指定初始化状态属性数据的对象
vm也会自动拥有data中所有属性
页面中可以直接访问使用
数据代理: 由vm对象来代理对data中所有属性的操作(读/写)
methods: 包含多个方法的对象
供页面中的事件指令来绑定回调
回调函数默认有event参数, 但也可以指定自己的参数
所有的方法由vue对象来调用, 访问data中的属性直接使用 this.xxx
插值表达式：
-->能够为变量进行简单的运算，字符串方法。（一步能够运算出来）
vue变量：被称为插值表达式 {{ vue变量 }}
<div id="app">
<p> {{ msg }}</p>
<p> {{ num *10 }}</p>
<p> {{ msg[1] }}</p>
<p> {{ msg.split('') }}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
msg: 'message'
}
文本指令：
指令：
指令（Directives）是Vue模板中最常用的一项功能，它带有前缀v-，能帮我们快速完成DOM操作、循环渲染、显示影藏
{{ }} ：将内部元素当成纯文本输出
v-text：解析文本，作用与{{}}一样 （原样输出）
v-html：解析html （能够解析html语法）
v-once: 处理的标签只能被解析一次
<body>
<div id="app">
<p>{{hello}}</p>
<p v-text = 'hello'></p>
<p v-html = 'hello'></p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
hello:'<span>hello world</span>'
}
})
</script>
事件指令：
<!-- 完整语法 -->
<a v-on:click="xxxx">...</a>
<!-- 缩写 -->
<a @click="xxxx">...</a>
v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法:
v-on:事件名='变量名' 实例化Vue里面 methods关键字 为挂载点提供事件的 里面写你的： 变量名：function
<script>
new Vue({
el:'#app',
data:{
msg:'vue渲染的内容'
},
methods:{ //为挂载点提供事件的
clickAction:function () {
alert(123)
}
}
})
</script>
属性指令：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
--元素节点的 style特性和 Vue 实例的 v_style 属性保持一致”
-动态更新HTML元素上的属性
小结：
1.vue通过 v- 指令来控制标签的属性
2.vue通过 变量 数据驱动页面（操作页面内容）
js 补充（面向对象）：
js 函数：
function f1() {
console.log('f1 run');
}
f1();
箭头函数：
let f3 = () => { // 没有参数
console.log('f3 run');
};
f3();
// 如果箭头函数有多个参数，有返回值
let f4 = (n1, n2) => n1 + n2;
let res = f4(10, 25);
console.log(res);
// 如果箭头函数参数列表只有一个，可以省略()
let f5 = num => num * 10;
res = f5(10);
console.log(res);
定义变量区别：
d = 45; //全局变量
const c = 30 ; // 常量
var a = 10 ;
let b = 20 ;
let、const定义的变量不能重复定义，且具备块级作用域
块级作用域： 在一个大括号内(作用范围)
eg:
if (1) {
var a = 10;
let b = 20;
}
定义类：
// 构造函数 == 类
function F2(name) {
this.name = name;
this.eat = function (food) {
console.log(this.name + '在' + food);
}
}
let ff1 = new F2("Bob");
console.log(ff1.name);
总结：
function可以作为类，内部会有this
箭头函数内部没有this
{}里面出现的函数称之为方法： 方法名(){}
在vue 环境内的this : 指父类对象（不是本身对象）
学习vue_01的更多相关文章
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
- Angular2学习笔记（1）
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- ABP入门系列（1）——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- 消息队列——RabbitMQ学习笔记
消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Unity3d学习 制作地形
这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...
- 《Django By Example》第四章 中文 翻译 （个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...
- 菜鸟Python学习笔记第一天：关于一些函数库的使用
2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...
随机推荐
- css3 rem手机自适应框架
css3 rem手机自适应框架 rem是按照html的字体大小来 所以 不同宽度浏览器 htmlfont-size不一样 就可以做到自适应了 此方法比百分比方便<pre><!DOCT ...
- vuex 源码分析(七) module和namespaced 详解
当项目非常大时,如果所有的状态都集中放到一个对象中,store 对象就有可能变得相当臃肿. 为了解决这个问题,Vuex允许我们将 store 分割成模块(module).每个模块拥有自己的 state ...
- 使用yarn来替代npm
Yarn是由Facebook.Google.Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ,正如官方文档中写的,Yarn 是为了弥补 npm 的一些缺陷而出现的 安装yarn ...
- Django学习笔记（18）——BBS+Blog项目开发（2）主体思路及流程
这篇博客主要完成一个BBS+Blog项目,那么主要是模仿博客园的博客思路,使用Django框架进行练习. 准备:项目需求分析 在做一个项目的时候,我们首先做的就是谈清楚项目需求,功能需求,然后才开始写 ...
- 『CSP2019初赛后的总结』
初赛已经过去了,分数大概也已经知道了,接下来的一个月停课应该就是全部准备复赛. 联赛前几次讲课的内容是组合计数,计数\(dp\),字符串,概率期望,数论,数据结构,多数知识点难度都是大于联赛难度的,不 ...
- Java生鲜电商平台-销售管理设计与架构
Java生鲜电商平台-销售管理设计与架构 说明:在Java开源生鲜电商平台中,销售人员我们称为跟餐饮店老板沟通与下载APP的一类地推人员.(所谓地推指的就是一个一个上门拜访.) 由于销售人员有以下几类 ...
- C/C++中new的使用规则
本人未重视new与指针的使用,终于,终于在前一天船翻了,而且没有爬上岸: 故此,今特来补全new的用法,及其一些规则: 话不多说 C++提供了一种“动态内存分配”机制,使得程序可以在运行期间,根据实际 ...
- 常用邮箱SMTP服务器地址大全
常用邮箱SMTP服务器地址大全 阿里云邮箱(mail.aliyun.com) POP3服务器地址:pop3.aliyun.com(SSL加密端口:995:非加密端口:110) SMTP服务器地址:sm ...
- 一条SELECT查询语句在数据库里执行时都经历了什么
每天都在跟 mysql 打交道,你知道执行一条简单的 select 语句,都经历了哪些过程吗? 首先,mysql 主要是由 server 层和存储层两部分构成的.server 层主要包括连接器.查询缓 ...
- composer基本操作详解
原文转自微信公众号:qq1005349393 Composer介绍 Composer 是 PHP 的一个包依赖管理工具.我们可以在项目中声明所依赖的外部工具库,Composer 会帮你安装这些依赖的库 ...