Vue之起步
引言：
这篇知识比较杂乱的前端基础知识，后续在系统学习vue
let and const:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<script>
{
// 全局作用域
var a=66;
// let 声明的变量 是块级作用域 且let 不能重复声明
let b=77;
}
console.log(a);
//console.log(b);
// 作用域的坑
var a_list=[];
for(var i =0;i<10;i++) {
a_list[i] = function () {
console.log(i);
};
}
a_list[6]();
b_list=[];
for(let aa=0;aa<10;aa++){
b_list[aa]=function () {
console.log("let声明打印---",aa)
}
}
b_list[6]();
// 变量提升 变量被提前使用 js 在渲染的时候 会将变量提前声明 var fff
// 若使用 let 则报错
console.log(fff);
var fff=22;
// const 声明一个只读变量 一旦声明 常量的值就不能改变
// 一旦声明 就必须立即初始化 不能留到以后赋值
// 作用域和let 相同 块级别声明
const pi=3.14;
pi=3.1;
</script>
</body>
</html>
箭头函数：类似python的lambda函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<script>
// vue 中的箭头函数
var f = a => a;
console.log(f(5));
// 等同于
// 其实就是 python中的lambda函数
var ff = function (a) {
return a;
}
console.log(ff('sdf'));
// 多个参数
var many = (x,y,z) =>x+y+z;
many(1,2,3)
console.log( many(1,2,3));
// 没有参数
var kkk = ()=>333;
console.log(kkk());
// 箭头函数 this 使用的时候注意的
var person1={
name:"yyy",
age:77,
fav:function () {
console.log("person1 start")
// 以这种传统的方式 此时this 指向 使用定义的对象 person1
console.log(this);
// es6 定义的参数对象 类似 python 的args 无需提前在函数中提前定义 但是箭头函数中 不能这样用
console.log(arguments);
console.log(this.name);
console.log("person1 end")
}
}
person1.fav();
var person2={
name:"ddd",
age:99,
fav:()=>{
console.log("person2 start");
// 以这种箭头函数 方式 this指的是定义时所使用的的对象window 即 var person2 被挂载到window上
console.log(this);
console.log(this.name);
console.log("person2 end")
}
}
person2.fav();
</script>
</body>
</html>
单体模式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<script>
// 对象单体模式 用来解决箭头函数 this 的指向问题
// fav(){} == fav:function(){}
var person={
name:"kjkl",
age:18,
fav(){
console.log("单体模式",this)
},
fav1:()=>{
console.log("非单体模式===",this)
return true;
}
}
// 使用单体模式之后 通过打印 this 明显指向了 person对象
person.fav();
</script>
</body>
</html>
ESMA6中的类：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<script>
// es6中的类
class Animal{
// 类似python 的 __init__
constructor(name,age) {
this.name=name;
this.age=age;
}
// 在类中 不同方法之间 不要加 逗号 用 花括号保持作用域
showName(){
console.log("in showname",this.name);
}
}
var d=new Animal("yuan",22);
d.showName();
// 明天 扩展 继承
</script>
</body>
</html>
Vue中的常用流程判断
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停 动态绑定的提示信息
</span>
</div>
<h1>------------------------------------------</h1>
<div id="app_3">
<p v-if="seen">
条件判断
</p>
</div>
<h1>-------------------------------------------</h1>
<div id ='app_4'>
<ol>
<li v-for="a in todos">
{{a.text}}
</li>
</ol>
</div>
<script>
var app2=new Vue(
{
el:'#app-2',
data:{
"message":"页面加在于"+new Date().toLocaleString()
}
}
)
var app3=new Vue(
{
el:"#app_3",
data:{
seen:true
}
}
)
var app3=new Vue({
el:"#app_4",
data:{
todos:[
{
text:"1234"
},
{
text:"5678"
},
{
text:"9999"
}
]
}
})
</script>
</body>
</html>
双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
// 双向绑定 其实 dom中多个标签绑定了 vue实例中的一个属性 其中任意一个发生变化 其他就会跟着变
// 这有点 python 引用语义的意思
var app6=new Vue({
el:"#app-6",
data:{
message:"hello vue"
}
})
</script>
</body>
</html>
事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app-5">
<p>
{{message}}
</p>
<button v-on:click="reversemsg">绑定事件</button>
</div>
<script>
// 绑定事件
var app5=new Vue(
{
el:"#app-5",
data:{
message:"绑定事件"
},
methods:{
reversemsg:function () {
this.message=this.message.split('').reverse().join('')
}
}
}
)
</script>
</body>
</html>
Node介绍：
其实node是一个平台，类似于python解释器于python，jvm于java
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<script>
// js之所以在浏览器运营并不是 因为浏览器本身 而是 其内嵌的js引擎
// 1 封装解析请求
// 2 渲染文件例如 html image等
/*
* 主要作用 js用来做交互
* 操作dom 对dom的增删改查 注册事件之类的
* 发送ajax 请求/跨域
* bom交互如给我我们提供页面跳转 历史记录控制台打印日志
* esmascript(js核心语音 变量的定义 函数的定义)
*
*
*
* 不能做哪些事情
* 涉及到端对端的应用程序 例如操作文件 虽然h5里边提供了文件相关的api 但是大多数只是涉及到只读
* 不能像java和python一样传文件路径直接读 所败了就是不能进行文件和文件夹的 curd
*
* 浏览器端 也不能 操作操作系统 例如操作系统的版本之类的
* js由 bom dom 以及es组成 但是bom和dom是浏览器提供的 并不是 es提供的 因此平常提及的js也就是es
* js的大部分功能 bom dom是浏览器开放出来的api 由浏览器执行引擎决定
* 观点
* 任何一门语言 能力并不是由语言本身决定的 是有执行环境决定的 比如java 运行在虚拟机上
* node就是js的一个平台
*
* node的作用
* 1 可以接受客户端用户的所有请求，并且能快速的给出响应 因此node 可以用来做网站
* 2 node可以作为一个中间层用来分发调用的数据接口
* 例如 一个 数据是java提供的 可以用node作为中间层 用来接受用户的请求
* 用node来调用java数据节藕 获取到数据后直接在node层做的html拼装，然后渲染好的页面直接给用户
* 为什么？
* node被成为高性能的web服务器 在抗高兵法的方面比传统的平台要好很多 因此这样以来可以极大的减轻服务器压力
*
*node 自带 npm 与python对比 node 就类似python的解释器 npm就是python的pip 不过和python不同的是
* npm init 的时候会生成package.json里边是该工程/包的一些初始信息 并且这些包并不想python一样集中管理
* 更像是 使用了虚拟环境的python 每个工程独立管理
*
* */
</script>
</body>
</html>
ESMA6中的面向对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<script>
// 构造函数的方式创建对象 这种方式才成为 面向对象 能使用继承
function Animal(name, age) {
this.name = name;
this.age = age;
}
// prototype 方法的原型
// 以下等同于python obj.attr=value
Animal.prototype.showName = function () {
// 以下等同于python的 func.__name__ cls.__name__
console.log(this.name)
}
var dog = new Animal("手动阀", 23)
dog.showName();
</script>
</body>
</html>
webpack简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js
script src=="./js/main.js"
这中方法加载资源叫做同步
若页面 图片较大或者其他静态资源比较多 则 会比较慢 印象用户体验
import add from './main.js'
-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<script>
// 使用webpack的原因
/*
* 很多网页可以看做是功能丰富的应用，它们拥有着复杂的js代码和一堆依赖包，为了简化开发的复杂度，前端社区涌现出了很多好的方法
* 1 模块化 可以把复杂的程序细化为小的文件
* 2 类似于typescript这种在js基础上扩展的语言 使我们能够实现目前版本的js不能直接使用的特性 并且之后还能转化为js文件 是浏览器可以识别
*
* 这些改进可以提高开发息率 但是利用他们开发的文件旺旺需要进行额外的处理才能让浏览器识别 而手动处理又是非常繁琐，这就为webpack类的工具出现提供了需求
*
*
* 什么是webpack
* 可以看做是模块的打包机
* 1 分析你的项目结构 找到js模块以及其他的一些浏览器不能直接运营的扩展 scss typescript 并将其沌河和打包为 合适的格式供浏览器使用
* 比如一些资源chrome 能识别 但是fixfoce就不能识别 但是通过webpack的编译就能识别 比如es6中的代码
*
*
*
* 模块化
* 前端中一个js文件就是一个模块 js中没有模块化的概念
* 目前有四种模块化的方法
* 1 commonjs
* 2 amd
* 3 cmd
* 4 es6module
* es6module 支持import和export 跟python的import很像 但是它必须在服务器环境下才支持 或者我们可能通过webpack的babel-loader将es6支持程es6的语言
* */
</script>
</body>
</html>
浙公网安备 33010602011771号