网站浏览历史记录恢复方法是什么,郑州云拓网站建设公司,百度移动网站生成,宁波网站建设的过程文章目录 一、Babel转码器1.1 Babel安装流程1.2 Babel命令行转码 二、Promise对象三、测试方式四、Vue#xff08;渐进式JS框架#xff09;4.1 准备4.2 创建一个项目4.3 运行一个项目 五、模板语法5.1 文本5.2 原始html5.3 属性Attribute5.4 使用JavaScript表达式 六、条件渲… 文章目录 一、Babel转码器1.1 Babel安装流程1.2 Babel命令行转码 二、Promise对象三、测试方式四、Vue渐进式JS框架4.1 准备4.2 创建一个项目4.3 运行一个项目 五、模板语法5.1 文本5.2 原始html5.3 属性Attribute5.4 使用JavaScript表达式 六、条件渲染6.1 v-if6.2 v-else6.3 v-show 七、事件处理7.1 v-on指令7.2 事件处理方法7.3 内联处理器中的方法可以直接叫他事件传递参数 八、表单输入绑定8.1 修饰符 .lazy8.2 .trim 九、组件基础9.1 单文件组件9.2 加载组件 一、Babel转码器
Babel 是一个广泛使用的 ES6 转码器可以将 ES 代码转为 ES5 代码从而在老版本的浏览器执行。这意味着你可以用 ES6的方式编写程序又不用担心现有环境是否支持。 转码实例
//转码前
input.map(itemitem1);
//转码后
input.map(function(item){return item1;});1.1 Babel安装流程
第一步 npm install --save-dev babel/core 第二步配置文件.babelrc Babel的配置文件是.babelrc存放在项目的根目录下。使用Babel的第一步就是配置这个文件。该文件用来设置转码规则和插件基本格式下
{presets: [],plugins: []
}第三步转码规则 presets字段设定转码规则 npm install --save-dev babel/preset-env 第四步将规则加入.babelrc
{presets: [babel/env],plugins: []
}1.2 Babel命令行转码
Babel提供命令行工具babel/cli用于命令行转码 npm install --save-dev babel/cli 基本用法如下 转码结果写入一个文件 –out-file或-o参数指定输出文件 $ npx babel|example.js --out-file compiled.js 或者 npx babel example.js -o compiled.js 整个目录转码 –out-diir或-d 参数指定输出目录 $npx babel src --out-dir lib 或者 $ npx babel src -d lib 二、Promise对象
它是一个对象它可以获取异步操作的消息提供统一的API各种异步操作都可以用同样的方法处理。
基本用法
const promise new Promise(function(resolve,reject){//some codeif(/*异步操作*/)resolve(value);}else{reject(error);}
});Promise 构造函数接受个函数作为参数该函数的两个参数分别是 resolve 和 reject 。它们是两个函数由avaScript 引擎提供不用自己部署 Promise 实例生成以后可以用 then 方法分别指定resolved 状态和 rejected 状态的回调函数
promise.then(function(value){//success
},function(error){//failure});三、测试方式
第一步全局安装npm install -g babel-cli 第二步安装babel-preset-env npm install -D babel-preset-env 第三步运行代码 babel-node --presets env index.js
四、Vue渐进式JS框架
4.1 准备
Vue cLI Vue.is 开发的标准工具Vue cLI 是一个基于 Vue.is 进行快速开发的完整系统
npm install -g vue/cli安装之后可以在 命令行中访问vue命令。验证是否安装成功。
vue --version4.2 创建一个项目
vue create vue-demo注意 vue-demo不准大写必须小写
进入文件后右键出现下图 4.3 运行一个项目
第一步进入项目根目录 cd vue-demo 第二步运行npm run serve启动项目
五、模板语法
assets存放静态资源图片。 components存放组件文件。
5.1 文本
数据绑定最常见的形式就是使用“{{}}”语法的文本插值
spanMessage:{{ msg }}/span一般配合js中的data()设置数据
export default{name: Helloworld,data(){return {msg:消息提示}}} 5.2 原始html
双大括号会将数据解释为普通文本而非html代码为了输出真正的html需要用v-html指令。
PUsing mustaches: {{ rawHtml }} /p
pUsing v-html directive: span v-htmlrawHtml/span/pdata(){return{rawHtml:a hrefhttps://www.klyingshi.com影视/a}}5.3 属性Attribute
Mustache语法不能在HTML属性中使用然而可以用v-bind指令
div v-bind:iddynamicId/divdata(){return{dynamicId:1001}}5.4 使用JavaScript表达式
在模板中一直都只绑定简单的【人品【erty键值Vue.js都提供了完全的JS表达式
{{ number 1 }
{{ ok ? yes : no }}
{{ message.split( ).reverse().join() }}这个表达式会在当前活动实例的数据作用域下作为JS被解析每个绑定都只能包含单个表达式所以下面的例子不会生效
!-- 这是语句不是表达式 --
{{ var a1 }}!-- 流程控制也不会生效请使用三元表达式--
{{ if(ok) {return message} }}六、条件渲染
6.1 v-if
v-if指令用于条件性地渲染一块内容这块儿内容只会在指令地表达式返回true值得时候被渲染。
p v-ifflag尝试一下/pdata(){return{flag:true}}6.2 v-else
用此指令表示v-if的else块
p v-ifflag这是第一个/p
p v-else这是第二个/pdata(){return {flag:false}}6.3 v-show
展示元素
h1 v-showok Hello/h1七、事件处理
7.1 v-on指令
通常缩写为符号来监听DOM事件并在触发事件时执行一些JS用法为v-on:clickmethodName或使用快捷方式clickmethodName
button clickcounter 1Add 1/buttondata(){return{counter: 0}}7.2 事件处理方法
button clickgreetGreet/buttonmethods:{greet(event){if(event){alert(event.target.tagName)}}}7.3 内联处理器中的方法可以直接叫他事件传递参数
button clickhihi/button
button clickwhatwhat/buttonmethods:{ say(message){alert(message)}}八、表单输入绑定
可以用 v-model 指令在表单input 、textarea 及select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇但 v-model 本质上不过是语法糖。它负责监听用户的输入事件来更新数据并在某种极端场景下进行一些特殊处理
input v-modelmessage placeholderedit me/
pMessage is:{{ message}}/p8.1 修饰符 .lazy
在默认情况下v-model 在每次 input 事件触发后将输入的值与数据进行同步。你可以添加 lazy 修饰符从而转为在 change 事件之后进行同步
input v-model.lazymessage/
pmessage is {{message}}/pdata(){return {message:}} 8.2 .trim
如果要自动过滤用户输入的首尾空白字符可以给v-model添加trim修饰符
input v-model.trimmessage/data(){return{message:}} 九、组件基础
9.1 单文件组件
Vue 单文件组件又名vue 文件缩写为 SFC)是一种特殊的文件格式它允许将 Vue 组件的模板、逻辑 与样式封装在单个文件中
tempIateh3单文件组件/h3
/tempIate
script
export default {name:MyComponent“
}
/script
style scopedh3{color: red;
}
/style9.2 加载组件
第一步:引入组件import MyComponentVue from /components/MyComponent.vue 第二步:挂载组件components: ({MyComponentVue } 第三步:显示组件my-componentVue /
