前端学习(三十八)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)+ ...
随机推荐
- INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES
[转] https://www.mobibrw.com/2016/3949 adb install 一个apk错误: INSTALL_FAILED_ALREADY_EXISTS 应用已存在,使用 ad ...
- [洛谷P1709] 隐藏的口令
问题描述 有时候程序员有很奇怪的方法来隐藏他们的口令.Binny会选择一个字符串S(由N个小写字母组成,5<=N<=5,000,000),然后他把S顺时针绕成一个圈,每次取一个做开头字母并 ...
- jquery用法第二波
过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $(“#id”) $("div[title=test]")选取titl ...
- 1,Spring MVC 学习总结(一)
一,什么是MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示 ...
- C#中给RICHTEXTBOX加上背景图片
在系统自带的RichTextBox中是无法给它设置背景图片,但是我们在某些场合可能需要给RichTextBox设置背景图片.那么怎么实现这一想法呢?经过研究发现通过其它巧妙的途径可以给RichText ...
- String reduction (poj 3401
String reduction Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1360 Accepted: 447 D ...
- 调试 & 常数优化:我有特别的 debug 技巧
rxz 的调试技巧(https://www.zhihu.com/question/60719584/answer/179363450): #define DEBUG printf("Pass ...
- Centos6.5在线配置安装Java环境与Tomcat环境
书写此文一来记录环境,以便后期查看使用,Linux环境下配置centos与Java开发环境 本文环境:虚拟机系统centos6.5 链接工具:xshell脚本链接工具 一.安装Java开发 ...
- 137、TensorFlow使用TextCNN进行文本分类
下面是分类的主函数入口 #! /usr/bin/env python import tensorflow as tf import numpy as np import os import time ...
- JSP_01
1.定义局部变量.输出语句 <!doctype html> <html> <head> <title>定义局部变量.输出语句</title> ...