vue基础入门，笔记

vue基础入门

  • 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实例对象）。
  • el element（元素）缩写，后面跟上html控件的id或class
  • vm View 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="[{width:"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代码检验规则。

Vue-cli3和Element-UI

  • public文件夹放静态资源。
  • App.vue是所有主件的根主件。
  • package.json或video_win\build\webpack.dev.conf.js的devServer节点配置如下（编译后在浏览器中打开页面）：
module.exports = {
	devServer: {
		host: 'localhost',
		port: 8080,//端口号
		open:true,//编译成功后直接浏览器中打开
		...
	}
}

posted on 2021-01-25 19:17  anjun_xf  阅读(92)  评论(0)  编辑  收藏  举报

导航

TOP