vue快速复习
教程地址： https://www.bilibili.com/video/av27969216
v-cloak 一般加入到标签中结束编译后自动消失
v-text v-text会完全替换标签中的值，而{{mes}}只替换花括号中的内容
v-html 可以将htlm标签替换
v-bind:title="mytitle" 的简写为 :title="mytitle" 用于绑定属性的指令
v-on 用于绑定事件 缩写是 @
v-model 是双向绑定而v-bind是单向绑定
v-for 是用于循环遍历数据
v-if 是直接在代码中用 注释 替换了原莱的代码
v-show 是在代码中加入 display:none
@click.stop 可以有效阻止冒泡事件产生
@click.prevent 阻止默认行为
@click.capture 添加事件监听时使用时间捕获模式
@click.self 只有点击自身才触发事件
@click.once 点击事件只执行一次
在vue中绑定样式有两种方式， v-bind:class 和 v-bind:style
钩子和指令
<input text="" value="" v-jujiao v-yanse/><!--从左到右依次执行--> <input text="" value="" v-use_jq:advs11ds /> //钩子函数的代码上下位置并不影响执行顺序 Vue.directive('yanse',{ bind:function(temp_zhi){//当指令绑定到元素的时候执行 temp_zhi.focus();//DOM还没加载完毕的时候无法绑定到指令 }, inserted:function(temp_zhi){//DOM加载完毕的时候执行 $(temp_zhi).css("color","#000"); $(temp_zhi).css("background-color","#ccc"); $(temp_zhi).attr("style","border:#ccc solid 1px;");//JQ直接覆盖了style }, updated:function(temp_zhi){//当Vnode更新的时候，会执行,可能会触发多次 console.log(1); } }); Vue.directive('jujiao',{ bind:function(el){//当指令绑定到元素的时候执行 el.focus();//DOM还没加载完毕的时候无法绑定到指令 }, inserted:function(el){//DOM加载完毕的时候执行 el.focus(); $(el).css("background-color","yellow"); $(el).attr("style","border:red solid 1px;");//JQ直接覆盖了style }, updated:function(el){//当Vnode更新的时候，会执行,可能会触发多次 console.log(1); } }); Vue.directive('use_jq',{ bind:function(temp_zhi,temp_name){//当指令绑定到元素的时候执行 $(temp_zhi).attr("style","border:red solid 1px;");//JQ直接覆盖了style console.log(temp_name.arg);//教程地址：https://cn.vuejs.org/v2/guide/custom-directive.html#钩子函数参数 }, }); new Vue({ el: '#app', data: { list:[ {id:1,name:'a'}, {id:2,name:'b'}, {id:3,name:'c'}, ] }, methods:{ ceshi(){ alert('1');//键盘抬起事件 }, f_two(){ alert('按下弹起D');//@keyup.键盘码 D的js键盘码是68 } } })
生命周期
<div id="app">
<input text="text" v-model:value="msg"/>
<div id="xuexi">{{msg}}</div>
<!--
生命周期钩子也叫声明周期函数也叫生命周期事件
-->
</div>
<script>
new Vue({
el: '#app',
data: {
msg:"aa"
},
methods:{
show(){
console.log('执行了show');
},
},
beforeCreate(){//实例完全被创建之出来之前会执行它
//this.show();在beforeCreate执行之前data数据和methods中的函数都还没有被初始化
console.log('执行了beforeCreate');
},
created(){//date和methods初始化后执行的函数
this.show();
},
beforeMount(){//date和methods初始化成功，但还没渲染到页面中
console.log(document.getElementById('xuexi').innerText);//输出{{msg}}而不是aa
//beforeMount执行的时候页面中的msg还没有被替换为aa
},
mounted(){//表示一切准备就绪
console.log(document.getElementById('xuexi').innerText);//输出aa而不是{{msg}}
},
beforeUpdate(){
console.log('修改之前');//data中的数据改变之前执行，也就是data中的数据已经改变但还未渲染到页面中
},
updated(){
console.log('修改之后');//data中的数据改变之后执行，data中的数据已经渲染到页面中
},
beroreDestroy(){
alert(1);
console.log('beroreDestroy');
},
destroyed(){
alert(2);
console.log('destroyed');
}
})
</script>
Ajax
<div id="box">
<input type="button" @click="getinfo()" value="点我异步获取数据(Get)">
<input type="button" @click="postinfo()" value="点我异步获取数据(Post)">
</div>
<script type = "text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
msg:'Hello World!',
},
methods:{
getinfo:function(){
//发送get请求
this.$http.get('http://xiapubm.kehu90.com/alone/xuexivue.html').then(function(res){
document.write(res.body);
},function(){
console.log('请求失败处理');
});
},
postinfo:function(){
//发送 post 请求
this.$http.post('http://xiapubm.kehu90.com/alone/xuexivue.html',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
document.write(res.body);
},function(res){
console.log(res.status);
});
}
}
});
}
</script>
组件化和模块化
<div id="app">
<xue-xi-la></xue-xi-la>
<xuexi></xuexi>
<xue-xi></xue-xi>
<ceshi></ceshi>
</div>
<template id="tmpl">
<h1>这是通过template元素在外定义的组件结构，这个方式有代码只能提示和高亮</h1>
</template>
<div id="app1">
<xuexi></xuexi>
</div>
<script type = "text/javascript">
//组件化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一
//模块化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用
//使用Vue.extend 来创建全局的Vue组件
var zhujian_la = Vue.extend({
template:'<h3>这是1组件</h3>'
})
//使用Vue.component('组件的名称','创建出来的组件模板对象')
Vue.component('xueXiLa',zhujian_la)//注册组件的用驼峰命名，使用的时候用-隔开
Vue.component('xuexi',zhujian_la)
Vue.component('xueXi',zhujian_la)
Vue.component('ceshi',{
template:"#tmpl"//在外定义组件
})
var vm = new Vue({
el:'#app',
});
var vm = new Vue({
el:'#app1',
});
</script>
定义私有组件
<div id="app">
<xue-xi-la></xue-xi-la>
<xuexi></xuexi>
<xue-xi></xue-xi>
<ceshi></ceshi>
<login>这条是报错的，不存在的组件</login>
</div>
<template id="tmpl">
<h1>这是通过template元素在外定义的组件结构，这个方式有代码只能提示和高亮</h1>
</template>
<div id="app1">
<xuexi></xuexi>
<login></login>
<canshu></canshu>
</div>
<script type = "text/javascript">
//组件化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一
//模块化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用
//使用Vue.extend 来创建全局的Vue组件
var zhujian_la = Vue.extend({
template:'<h3>这是1组件</h3>'
})
//使用Vue.component('组件的名称','创建出来的组件模板对象')
Vue.component('xueXiLa',zhujian_la)//注册组件的用驼峰命名，使用的时候用-隔开
Vue.component('xuexi',zhujian_la)
Vue.component('xueXi',zhujian_la)
Vue.component('canshu',{//组件可以有自己的data数据，组件的data和实例的data有点不一样，
//实例中的data可以为一个对象，但是组件中的data必须是一个方法
//组件中的data除了必须是一个方法之外，这个方法内部必须返回一个对象才行
template:'<h4>{{zujianmsg}}</h4>',
data:function(){
return {
zujianmsg:'组件中自己定义的数据'
};
}
})
Vue.component('ceshi',{
template:"#tmpl"//在外定义组件
})
var vm = new Vue({
el:'#app',
});
var vm2 = new Vue({
el:'#app1',
data:{},
components:{//定义内部私有组件
login:{
template:'<h1>私有组件</h1>'
}
}
});
</script>
组件切换
<style> .ball{ width:15px;height:15px;border-radius:50%;background:red; } </style> <body> <div id="app"> <a href="#" @click="flag=true">登录</a> <a href="#" @click="flag=false">注册</a> <login v-if="flag"></login> <register v-else="flag"></register> <!--vue提供了component来展示对应名称的组件--> <!--component是个占位符， :is属性，可以用来指定展示的组件的名称--> <!--因为 :is 后面是默认作为表达式来解析的，但login组件名称又是一个字符串，所以必须加冒号--> <component :is="'login'"></component> </div> <script type = "text/javascript"> Vue.component('login',{ template:"<h3>登录组件</h3>" }) Vue.component('register',{ template:"<h3>注册逐渐</h3>" }) var vm = new Vue({ el:'#app', data:{ flag:true } }); </script>
父组件向子组件传值和data与props的区别
<div id="app">
<com1 v-bind:parentmsg="msg"></com1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'这是父组件'
},
methods:{},
components:{
com1:{
data(){//子组件中的data数据并不是通过父组件传递过来的，而是子组件私有的
//例如子组件通过ajax返回的数据都可以放在data身上,props是只读，data可以修改
return {
title:'123',
content:'456'
}
},
template:'<h1 @click="change">这是子组件--{{title}}--{{parentmsg}}</h1>',
//组件中的props中的数据，都是通过父组件传递给子组件的
props:['parentmsg'],//把父组件传递过来的parentmsg属性现在props数组中定义一下，这样才能使用这数据
methods:{
change(){
this.title="被修改"
//this.parentmsg="被修改"//这条语句加上会警告，因为 props的参数应该是只读而不要去修改它
}
}
}
}
});
</script>
使用ref获取DOM元素
<style> .ball{ width:15px;height:15px;border-radius:50%;background:red; } </style> <body> <div id="app"> <input type="button" value="获取元素" @click="getElemtnt" /> <h3 ref="ceshi">哈哈</h3> <h3 ref="suibian">suibian</h3> </div> <script type = "text/javascript"> var vm = new Vue({ el:'#app', data:{ }, methods:{ getElemtnt(){ console.log(this.$refs.ceshi.innerText); console.log(this.$refs.suibian.innerText); } } }); </script>
vue的路由功能
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<a href="#/login">登录</a>
<!--router-view 可以当做是一个占位符-->
<router-view></router-view>
<!--router-link 渲染后直接变成a标签-->
<router-link to="/login">登录啊</router-link>
<router-link to="/register">注册啊</router-link>
</div>
<script type = "text/javascript">
var login = {
template:'<h4>登录---{{$route.query.id}}</h4>',
created(){//组件也有自己的生命周期
console.log(this.$route);//通过访问 .html#/login?id=1 地址可以输出路由的参数 id = 1
}
}
var register = {
template:'<h4>注册</h4>',
}
var aa = {
template:'<h4>aa</h4>',
}
var bb = {
template:'<h4>bb</h4>',
}
var account = {
template:'<h4>account</h4>',
}
var routerObj = new VueRouter({
routes:[//路由规则
//每个路由规则都是一个对象，这个规则对象都有连个必须的属性，
//1、path表示监听，哪个是路由连接地址
//2、component 如果路由是当前匹配到的path,表示component属性对应的那个组件就显示
{path:'/login',component:login}, //component的值必须是一个 组件模板对象
{path:'/register',component:register},
{
path:'/account',
component:account,
children:[
{path:'aa',component:aa},//访问地址 .html#/account/aa
{path:'bb',component:bb},//访问地址 .html#/account/bb 和 {path:'/account/bb',component:bb} 没区别
]
}
]
});
var vm = new Vue({
el:'#app',
data:{
},
methods:{
getElemtnt(){
console.log(this.$refs.ceshi.innerText);
console.log(this.$refs.suibian.innerText);
}
},
router:routerObj //将路由规则对象，注册到vm实例上用来监听url地址的变化，然后展示对应组件
});
</script>
watch监听数据变化
<div id="app">
<input type="text" value="" v-model="ceshi" />
<div>{{ceshi}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el:'#app',
data:{
ceshi:'aa'
},
methods:{
},
watch:{//使用这个属性可以监视data中数据的变化，然后处罚指定函数
ceshi:function(newVal,oldVal){//第一个参数为新值，第二个为旧值
console.log(newVal);
console.log(oldVal);
console.log(this);
}
}
});
</script>
computed-计算属性的使用和3个特点
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<input type="text" value="" v-model="diaoyong" />
<div>{{ceshi}}</div>
<div>{{zouni}}</div>
<div>{{diaoyong}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el:'#app',
data:{
diaoyong:'a'
},
methods:{
},
computed:{//在computed中可以定义一些属性，这些属性叫做 计算属性 ，本质就是一个方法，只不过
//在使用这些属性的时候吧他们的名称直接单做属性来使用，并不会吧计算属性单做方法来调用
'ceshi':function(){
let temp_num = 15+5;
return temp_num;
},
//注意：计算属性在引用的时候一定不要加()去调用，直接把他单做 普通 属性 去使用就好了
zouni:function(){
let temp_num = 1+5;
return temp_num;
}
}
});
</script>
教程例子打包：https://files.cnblogs.com/files/xhrs/vue教程例子.zip
npm教程地址：https://www.bilibili.com/video/av13816480
1、安装nodejs
2、命令行输入 npm-v 弹出版本信息说明安装成功
3、新建文件夹在 文件夹中打开命令行 输入 npm init -y 会在该文件夹下生成一个 package.json文件
4、命令行输入 npm i jquery 会自动在 文件夹下下载 jquery
浙公网安备 33010602011771号