- vue hello world
var app1 = new Vue({ el: '#app-1', data: { message: 'Hello Vue.js!' }, methods: { showMessage: function () { this.message = this.message.split('').reverse().join(''); } } })
methods里this就是vm（vue实例对象）。elelement（元素）缩写，后面跟上html控件的id或classvmView Model（视图模型），vue是数据驱动视图(DOM)。vm实际上是Vue类的一个实例
- Vue代码运行原理：vue代码编译成js代码。
- 动态输出内容到页面发展过程：js拼接html串然后在网页上输出
→js模板引擎→模板引擎高级版——vue - 模板语法概览
插值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构
- 指令，本质是自定义属性。
v-开头如v-if(true显示，false隐藏)、v-cloak。更多指令见vue官网api的指令节点
- 数据响应式，数据的变化导致页面内容变化；而html5的响应式，页面根据屏幕尺寸渲染不同样式；
- 双向数据绑定:体现在表单中。具体实现是在html控件加
v-model，如<input v-model="message">MVVM设计思想：Model(即数据)，view(即DOM)，view-model(M和V通过vm交互)。View —DOM监听—> Model、Model —数据响应—> View- 事件：
<button v-on:click='say("hi",$event)" @click="work"/>，绑定的函数可传递参数和事件对象（如say），其中事件对象包含了事件元信息，而work虽然没传事件对象，但是该函数默认第一个参数接收。如果显示传递，则事件对象必须放到最后一个参数。- 输出按键值
<input type='text' @keyup='handle' v-model='a'/> handle(event){ console.log(event.keyCode) }
- 自定义全局按键修饰符
Vue.config.keyCodes.别名=13;//回车（13）时触发特点方法 <input type='text' @keyup.别名='handle' v-model='a'/>等价于 <input type='text' @keyup.13='handle' v-model='a'/>
- 属性绑定，单向绑定属性值。用法
<button v-bind:style='myStyle'></button>简写:style='myStyle'v-model双向绑定的实现原理：本质是<input v-bind:value="msg" @input="msg=$event.target.value">
@input事件是实时监控的，每次输入都会调用。（H5的oninput事件在元素值发生变化是立即触发，onchange 在元素失去焦点时触发，也可用于select元素。）
- 样式绑定（class和style绑定样式，更多见vue.js入门笔记1“Vue为标签添加样式”）：
* 对象语法： .class名称{ border:1px solid red; } <div v-bind:class="{class名称:true则显示}"></div> * 数组语法： abClass="class名称11" 变量1="class名称"; <div v-bind:class="['class名称22',变量1,{abClass:isShow}]"></div> * 内联样式 变量2={color:red}; <div v-bind:style="[{"55px"},变量2]"></div>
- 分支结构
v-if，v-else-if，v-else(false时以销毁方式隐藏控件)，v-show(false时style加display:none隐藏没销毁控件)<div v-if='score>=90'>优秀</ div> <div v-else-if='score<90&&score>=80'>良好</div> <div v-else-if='score<80&&score>60'>一般</div> <div v-else>比较差</div>
- 分支循环结构
v-for遍历数组或对象 (其中:key仅为了vue提高性能)<ul> <li :key='index' v-for='(item,index) in myFruits'> <span>i{item.ename}}</span> <span>-----</span> <span>{{item.cname}}</span> </li> </ul> * json对象的value是12时才输出： <div v-if='value==12' v-for='(value,key,index) in object'>{{value}}--{{key}}--{{index}}</div>
v-slot2.6才出。
- 常用特性概览
表单操作
自定义指令 ，见 vue.js入门笔记1 “自定义全局指令”，也可以定义局部指令（见api）
计算属性
过滤器
侦听器
生命周期
<input type='text' v-model='a'/>v-model.lazy='实现change事件后才会更新值' v-model.trim='去掉文本前后空格' v-model.number='值为数值型'
- 自定义带参数指令 —— 改变元素背景色
Vue.directive('color',{ inserted:function(el,binding){ el.style.backgroundColor = binding.value.color; } }) * 指令的用法 <input type="text" v-color='{color:"orange"}'>
- 计算属性:复杂的计算逻辑抽离成js代码，让html里的模板变得简洁。它与方法区别：方法不存在缓存；计算属性有（第一次执行，第二次只是读取缓存）填坑记录：v-model使用三元表达式有些局限，最好不要使用。下面代码在如下场景会出现bug：在HeadBeforeDay是空时录入一个1，然后保存。然后在改5，就会发现HeadBeforeDay仍然1。表象就是vue双向绑定失效了，你认为HeadBeforeDay会得到5实际仍然是1。
<el-input v-model="HeadBeforeDay=='0'?'0':HeadBeforeDay"></el-input>
<p>演示计算属性——反转文本: "{{ reversedMessage }}"</p>
data:{
message: 'Hello';
},computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('');//内容反转输出
}
}
- 侦听器：监控某个变量，一旦改变就通知侦听器所以绑定的方法。比如验证账号是否被已使用。
- 例子：姓名输完后自动变动全名。
姓名：<input type="text" v-model.lazy='lastName'>
全名：<div>{{ful1Name}}</div>
data: {
firstName: 'Jim',
lastName: 'Green',
ful1Name: 'Jim Green'
},
watch: {//【侦听器】
firstName: function(val){
this.ful1Name =val +' ' +this.lastName;
},
lastName:function(val){
this.fullName = this.firstName +' '+val;
}
}
public async mounted(){
this.$watch("birthday",val=>{。。。})//typescript+vue用法：生日改变修改年龄
}
- 过滤器：格式化数据(帮助理解：在管道对自来水进行过滤，让水合规；对数据过滤让其达到特定格式)。如首字母变大写、格式化日期。
全名：<div :id='ful1Name | upper'></div>
Vue.filter('upper',function(val,arg1){//全局过滤器
console.log(arg1);//参数
return
val.charAt(0).toUppderCase() //第一个字符
+
val.slice(1);//返回从索引1开始后面所有字符
})
data: {
ful1Name: 'Jim',
},
filters:{//局部过滤 （只能本组件内部使用，即vm实例对象内）
upper:function(){
return 。。。。;
}
}
yyyy-MM-dd HH:mm:ss —— 年-月-日 时:分:秒其中MM大写是为了区分“月”与“分”，而HH大写，是为了区分12小时制与24小时制。小写的h是12小时制，大写的H是24小时制。- 生命周期：创建、运行、销毁.
挂载(初始化相关属性)
①beforeCreate
②created
③beforeMount
④mounted
更新（元素或组件的变更操作)
①beforeUpdate
②updated
销毁（销毁相关属性) —— this.$destroy();
①beforeDestroy
②destroyed
- 组件化思想：标准、分治（各写各的代码互不影响）、重用、组合（标分重组，bfcz不复存在 ）
- 有了组件化开发思想，就会有下：
我们希望尽可能多的重用代码 自定义组件的方式不太容易(html、css和js) 多次使用组件可能导致冲突
- 组件化规范: google在推到Web Compoients，通过创建封装好功能的定制元素解决上述问题
- 子组件命名规则：驼峰命名法，单词间用
-。html属性大小写不敏感，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。 - 父组件向子组件传值：父页面里通过控件属性绑变量方式给子组件传递值。
子组件
Vue.componetnt('my-input',{
props: ['title','numval','boolval','arrval','objval'],
templage:'<div>{{title}}</div>'
})
父组件
<my-input :title='title' :numval='12' boolval='true' :arrval='数组' :objval='对象'></my-input>
- 希望每个 prop 都有指定的值类型。可以以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型：
props: {
title: String,
likes: Number,
}
- props传递原则：单向数据流。子操作父数据，是不允许的。虽然子组件可以操作父组件数据。
- 子组件向父组件传值：
$emit子组件调用父的方法，参数1：父组件中该控件方法名，参数2：父方法在$event中可以收到。
//子组件通过自定义事件向父组件传递信息
<button v-on:click='$emit("enlarge-text",值--子给父的值)'>扩大字体</button>
//父组件监听子组件的事件
<menu-item v-on:enlarge-text='fontsize+= 0.1'></menu-item>
- 兄弟组件间数据传递：通过事件中心进行通信。核心代码：
var eventHub = new vue();//1.单独的事件中心管理组件间通信
eventHub.$on("add-todo',addTodo);//2.监听事件
eventHub.$off('add-todo')//销毁事件
eventHub.$emit('add-todo',id);//3.触发事件
- 接口调用方式：
原生ajax → jQuery的ajax → fetch → axios - ES6语法，处理异步编程promise
- Promise是异步编程的一种解决方案，Promise是一个对象。
- 使用Promise主要有以下好处:
* 可以避免多层异步调用嵌套问题(即回调地狱)
* Promise对象提供了简洁的API，使得控制异步操作更加容易
-
fetch 和 axios 都是基于Promise实现的。
-
axios全局配置
axios.defaults.timeout = 3000;//超时时间
axios.defaults.baseURL = 'http://localhost:3000/app';//默认地址
axios.defaults.headers['mytoken']= 'aqwerwqwerqwer2ewrwe23eresdf23’//设置http请求头
- axios拦截器
- 请求拦截器，在请求发出之前设置一些信息。
- 响应拦截器，在获得数据之前对数据做一些加工处理。
- async/await是ES7引入的语法，可以更加方便进行异步操作。
- async关键字用于函数上(async函数的返回值是Promise实例对象)
- await关键字用于async函数当中(await可以得到异步的结果)
- 前一个异步请求是后一个异步请求参数，如下也能够保证处理顺序，体验更自然：
async function queryData (id){
const ret = await axios.get('/cata');//await后面跟上promise实例对象
var r = await axios.get('aa?info='+ret.data);
return r.data;
}
queryData().then(function(data){
console.log(data);
});
vue路由
- 路由本质是对应关系。
- 后端路由：根据不同的用户URL请求，返回不同的内容。url请求地址与服务器资源间的对应关系。
- SPA单页面应用，整个网站一个页面，内容变化通过ajax、支持前进和后退。SPA核心是前端路由。
- 前端路由：根据不同用户事件，显示不同页面内容。故，前端路由负责事件监听，触发事件后，通过事件函数渲染不同内容。
//监听window 的onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function () {
//通过location.hash获取到最新的hash值
}
- 官方支持的 vue-router 库，包含的功能有:
支持HTML5历史模式或hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
- 基本使用步骤
- 1.引入相关的库文件
- 2.添加路由链接
- 3.添加路由填充位
- 4.定义路由组件
- 5.配置路由规则并创建路由实例
- 6.把路由挂载到Vue根实例中
vue cli 脚手架
- 脚手架就是批处理命令，目的是方便程序员通过命令完成重复繁重的功能。
- 安装node.js后就内置
npm。yarn是Facebook替代npm的包管理工具。 vue -V查看vue cli版本
Vuex项目实战 2021-1-31 11:19:52
- Vuex类似chrome的sessionStorage，它是满足组件间数据共享。
- Vuex和localstorage，sessionstorage区别：
- vuex用于组件之间的传值(且双向绑定)，localstorage，sessionstorage则主要用于不同页面之间的传值。
- vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地；sessionstorage( 会话存储 ) 。
- 当刷新页面（F5刷新,属于清除内存了）时vuex存储的值会丢失，sessionstorage页面关闭后就清除掉了，localstorage不会。
- vuex是储在页面上的变量，还是个Object，是缓存，刷新页面就清空了。而storage是存在浏览器，和页面就无关，刷新页面也不会清空。
- 命令
vue ui—— Vue的可视化面板。可以图形化方式一步一步地创建vue项目。 - 文件
.prettierrc，可定制js代码检验规则。
- public文件夹放静态资源。
- App.vue是所有主件的根主件。
- package.json或video_winuildwebpack.dev.conf.js的devServer节点配置如下（编译后在浏览器中打开页面）：
module.exports = {
devServer: {
host: 'localhost',
port: 8080,//端口号
open:true,//编译成功后直接浏览器中打开
...
}
}