前端学习(三十八)vue(笔记)
Angular+Vue+React
Vue性能最好,Vue最轻
=======================================================
Angular
入门难,学习成本高
Vue
简单
=======================================================
Vue
官网:http://vuejs.org/
中文:http://cn.vuejs.org/
Vue.js的发展
1.x
2.x √
=================================================
Vue如何玩?
new Vue({
el:'元素选择器',
data:{
数据
},
methods:{
方法
方法中:this就是当前new出来的实例
}
});
事件
<button v-on:click="方法()">按钮</button>
<button @click="方法()">按钮</button>
指令:
v-model 指定数据
v-for 循环
v-for="value in arr"
v-for="(value,index) in arr"
v-for="(value,key,index) in json"
v-show 显示
====================================================
简易留言板
计算属性
{{reverseMessage}}
new Vue({
el:'#app',
data:{
message:'hello'
},
computed:{
reverseMessage(){
return this.message.split('').reverse().join('');
}
}
});
======================================================
class操作
:class="{active:true/false}"
style操作
:style="{width:width+'px'}"
图片
:src=""
==================================================
交互
Vue本身不支持交互
可以跟任何交互的库配合
jquery
axios 交互库
不支持jsonp,只支持ajax
=======================================
钩子函数 生命周期
beforeCreate 创建实例之前
created 创建实例完成
beforeMount 挂载之间
mounted 挂载完成
beforeUpdate 更新之前
updated 更新完毕
beforeDestroy 销毁之前
destroyed 销毁完毕
如何销毁:
v.$destroy()
防止闪屏
[v-clock]{
display: none;
}
<div id="div1" v-clock></div>
================================================
事件
事件对象
$event
@click
@contextmenu
@keydown
事件冒泡
ev.cancelBubble = true;
@click.stop = "show()"
默认事件
ev.preventDefualt();
@click.prevent = "show()"
事件冒泡和默认事件同时解决
@click.stop.prevent = "show()"
键盘事件
@keydown.ctrl/enter
自定义按键
Vue.config.keyCodes.a = 65;
@keydown.a = "show()"
=============================================
模板
{{}}
v-text
v-html
-================================================
Vue组件
组件 Component
---------------------------------------------
定义组件
公共的组件
Vue.component('组件的名字',{
template:'模板',
data(){
return {
数据
};
}
});
私有的组件
new Vue({
components:{
'组件的名字':{
template:'模板',
}
}
});
使用组件
<组件的名字></组件的名字>
template一定要有一个根元素
组件写在template中可读性差
<template id=""></template>
<script type="x-template" id=""></script>
==============================================
组件之间数据通信
父级给子级数据
<test :aaa="xxx"></test>
Vue.component('test',{
template:'',
props:['aaa']
或者
props:{
aaa:String
}
});
子级给父级数据
=============================================
Vuex
http://vuex.vuejs.org/
============================================
Vue filter 过滤器
============================================
路由 ***
http://router.vuejs.org/
============================================
vue-cli 脚手架
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
vue init webpack 项目名
vue init webpack-simple 项目名 √
=========================================
引入静态样式资源需要:
style-loader
css-loader
下载:
npm install style-loader css-loader --save-dev
配置:
webpack.config.js
{
test: /\.css$/,
loader: ['style-loader','css-loader']
}
==================================================
axios 2.x推荐
vue-resource 1.x推荐
引入本地图片
require(url);
前端学习(三十八)vue(笔记)的更多相关文章
- 前端学习(三十六)promise(笔记)
一个页面: 头部.用户信息.新闻列表 jquery ajax: 1.$.ajax({ url:'', dataType:'json', }).then(res=>{ //r ...
- 前端学习(三十九)移动端app(笔记)
移动端App 开发App的三种方式 Native App 原生 底层语言 java Android oc ...
- 前端学习(三十五)模块化es6(笔记)
RequireJs:一.安装.下载 官网: requirejs.org Npm: npm i requirejs二.使用 以前的开发方式的问题: 1).js 是阻塞加 ...
- 前端学习(三十四)对象&模块化(笔记)
人,工人 //类的定义 function Person(name,age){ //构造函数 //工厂模式 //1.原料 //var obj = new ...
- 前端学习(三十)es6的一些问题(笔记)
赋值表达式 document.onclick = document.onmouseover = fn; var a = b = c = d = 5; 不推荐 逗号表 ...
- 前端学习(二十八)es6&ajax(笔记)
ES6 let 块级作用域 const 解构赋值 字符串拼接 扩展运算符 ------------------------------------------ ...
- Salesforce LWC学习(三十八) lwc下如何更新超过1万的数据
背景: 今天项目组小伙伴问了一个问题,如果更新数据超过1万条的情况下,有什么好的方式来实现呢?我们都知道一个transaction只能做10000条DML数据操作,那客户的操作的数据就是超过10000 ...
- 学习笔记:CentOS7学习之十八:Linux系统启动原理及故障排除
目录 学习笔记:CentOS7学习之十八:Linux系统启动原理及故障排除 18.1 centos6系统启动过程及相关配置文件 18.1.1 centos6系统启动过程 18.1.2 centos6启 ...
- bp(net core)+easyui+efcore实现仓储管理系统——入库管理之二(三十八)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
随机推荐
- 碎片记录——JMeter之 http post json对象与参数化调用,以及beanshell 引用Java源码
参考文档 http://jmeter.apache.org/usermanual/component_reference.html#samplers https://blog.csdn.net/qq_ ...
- SpringBoot之Web进阶
.. 另外包括Springboot常用技术整合 以及项目上的应用
- 两个list 合并后去除掉重复removeAll()的,然后再随机获取最后list中的 几个值
public static void test1(){ String s1="1,2,5,3,6,9"; String n1[]=s1.split(","); ...
- selenium来识别数字验证码
用python写一爬虫,需要模拟登陆,并且有数字验证码.通过selenium+pytesseract+PIL可以实现验证码识别并登陆.三大步: 用selenium截屏,此时截取的是整个页面的 用PIL ...
- flask-script实现自动刷新页面调试
本文flask==1.0.2 1.导入extension包 from flask_script import Manager 2.使用manager管理工具 app = Flask(__name__) ...
- 【CDN+】Kafka 的初步认识与入门
前言 项目中用到了Kafka 这种分布式消息队列来处理日志,本文将对Kafka的基本概念和原理做一些简要阐释 Kafka 的基本概念 官网解释: Kafka是最初由Linkedin公司开发,是一个分布 ...
- python数据类
前言 之前有写过一篇python元类的笔记,元类主要作用就是在要创建的类中使用参数metaclass=YourMetaclass调用自定义的元类,这样就可以为所有调用了这个元类的类添加相同的属性了. ...
- Linux 两台服务器之间传递文件
参考: https://www.cnblogs.com/clovershell/p/9870603.html linux采用scp命令拷贝文件到本地,拷贝本地文件到远程服务器 // 假设远程服务器 ...
- Jmeter接口测试报告模板优化(续)
在之前的基础上又优化了一下: 1.增加了对接口响应时间段的统计,如小于0.5s的请求有多少,0.5-1s的有多少,大于1s的有多少.可以自行修改.且不同范围内的时间字体颜色不一样,便于区分. < ...
- 为什么有mac地址还学要有IP地址??
历史原因:早期的以太网只有集线器 ,没有交换机,所以发出去的包能被以太网内的所有机器监听到,因此要附带上MAC地址,每个机器只需要接受与自己MAC地址相匹配的包. 个人感觉上面的说法并不是太准确.找明 ...