.enter
.tab
delete
:捕获(“删除”和“退格”键).esc
.space
up
.down
.left
.right
ctrl
alt
.shift
.meta
<body>
<div id="app">
<input type="text" v-on:keydown.enter="fun1" placeholder="
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function (){
alert("按下的是回车");
}
}
});
</script>
2.4 v-text和v-html
<body>
<div id="app">
<div id="div1"></div>
<div id="div2"></div>
</div>
<div id="app2">
<div v-html="message"></div>
<div v-text="message"></div>
</div>
</body>
<script>
//view model
new Vue({
el:"#app2",
data:{
message:"<h1>Hello Vue</h1>"
}
});
//传统js的innerText和innerHTML
window.οnlοad=function (){
document.getElementById("div1").innerHTML="<h1>Hello</h1>";
document.getElementById("div2").innerText="<h1>Hello</h1>";
}
</script>
2.5 v-bind
简化
直接使用:(冒号)
<body>
<div id="app">
<font size="5" v-bind:color="ys1">传智播客</font>
<font size="5" v-bind:color="ys2">黑马程序员</font>
</div>
</body>
<script>
//view model
//插值表达式不能用于html标签的属性取值,要想给html标签的属性设置变量的值,需要使用v-bind
//v-bind也可以简化写法:直接使用:(冒号)
new Vue({
el:"#app",
data:{
ys1:"red",
ys2:"green"
}
});
</script>
2.6 v-model
取值,获取json(有点像对象的形式)的值
<body>
<div id="app">
<form action="" method="post">
用户名:<input type="text" name="username" v-model="user.username"><br>
密码:<input type="text" name="password" v-model="user.password"><br>
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"test",
password:"1234"
}
}
})
</script>
2.7 v-for
遍历数组
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr">{{item}}={{index}}</li>
</ul>
<ol>
<li v-for="(key,value,index) in product">{{key}}={{value}}:{{index}}</li>
</ol>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
product:{
id:1,name:"笔记本",price:5000
}
}
})
</script>
遍历对象
<body>
<div id="app">
<table border="1">
<tr>
<td>序号</td>
<td>编号</td>
<td>名称</td>
<td>价格</td>
</tr>
<tr v-for="(produce,index) in products">
<td>{{index+1}}</td>
<td>{{produce.id}}</td>
<td>{{produce.name}}</td>
<td>{{produce.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
products:[
{id:1,name:"笔记本",price:5000},
{id:2,name:"西奈",price: 6000},
{id:3,name:"谢特",price: 7000}
]
}
})
</script>
2.8 v-if与v-show
v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性
<body>
<div id="app">
<span v-if="flag">传智播客</span>
<span v-show="flag">itcast</span>
<button v-on:click="toggle">切换</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
toggle:function (){
this.flag=!this.flag;
}
}
})
</script>
第三节: vue.js的生命周期
8个生命周期的执行点,4个基本的,4个特殊的
vue在生命周期中有这些状态,beforeCreate
,created
,beforeMount
,mounted
,beforeUpdate
,updated
,beforeDestroy
,destroyed
。Vue 在实例化的过程中,会调用这些生命周期的钩子,给我们提供了执行自定义逻辑的机会
vue对象初始化过程中,会执行到beforeCreate
,created
,beforeMount
,mounted
这几个钩子的内容
beforeCreate
:数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象created
:数据已经绑定到了对象实例,但是还没有挂载对象beforeMount
:模板已经编译好了,根据数据和模板已经生成了对应的元素对象,将数据对象关联到了对象的el属性,el属性是一个HTMLElement
对象,也就是这个阶段,vue实例通过原生的createElement
等方法来创建这个html片段,准备注入到我们vue实例指明的el属性所对应的挂载点mounted
:将el的内容挂载到了el,相当于我们在jquery执行了(el).html(el)
,生成页面上真正的DOM,上面我们就会发现DOM的元素和我们el的元素是一致的。在此之后,我们能够用方法来获取到el元素下的DOM对象,并进行各种操作- 当我们的data发生改变时,会调用
beforeUpdate
和updated
方法beforeUpdate
:数据更新到DOM前,我们可以看到$el
对象已经修改,但是我们页面上DOM的数据还没有发生改变updated
:DOM结构会通过虚拟DOM的原则,找到需要更新页面DOM结构的最小路径,将改变更新到DOM上面,完成更新
beforeDestroy
,destroed
:实例的销毁,vue实例还是存在的,只是解绑了事件的监听还有watcher对象数据与viewde绑定,即数据驱动
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function() {
console.log(this);
showData('创建vue实例前', this);
},
created: function() {
showData('创建vue实例后', this);
},
beforeMount: function() {
showData('挂载到dom前', this);
},
mounted: function() {
showData('挂载到dom后', this);
},
beforeUpdate: function() {
showData('数据变化更新前', this);
},
updated: function() {
showData('数据变化更新后', this);
},
beforeDestroy: function() {
vm.test = "3333";
showData('vue实例销毁前', this);
},
destroyed: function() {
showData('vue实例销毁后', this);
}
});
function realDom() {
console.log('真实dom结构:' + document.getElementById('app').innerHTML);
}
function showData(process, obj) {
console.log(process);
console.log('data 数据:' + obj.message)
console.log('挂载的对象:')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
//vm.message = "good...";
vm.$destroy();
</script>
第四节:VueJs ajax
4.1 vue-resource
vue-resource
是Vue.js的插件提供了使用XMLHttpRequest
或JSON
进行Web请求和处理响应的服务。当vue更新到2.0之后,作者就宣告不再对vue-resource
更新,而是推荐axios。
vue-resource的github:http://github.com/pagekit/vue-resource
4.2 Axios
Axios是一个基于promise的http库,可以用在浏览器和node.js中
Axios的github:http://github.com/axios/axios
4.3 引入Axios
首先就是引入axios,如果你使用es6,只需要安装axios模块之后
import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios
当然也可以用script引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
4.4 get请求
//通过给定的ID来发送请求
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
//以上请求也可以通过这种方式来发送
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
4.5 post请求
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});
**前端资料汇总**
![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)
我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。
首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。
更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点:和什么人、做什么事、给多少钱,要给这三者在自己的心里划分一个比例。
最后,祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。