vue.js学习笔记vue学习
链接: .
初步学习
1、vue 基础
1.1 vue 简介
1、javascript框架
2、简化DOM操作
3、响应式数据驱动
1.2 第⼀个vue程序
1、导⼊开发版本的Vue.js；
2、创建Vue实例对象，设置el属性和data属性；
3、使⽤简介的模板语法把数据渲染到页⾯上；
1.3 el 挂载点
el 挂载点：
el是⽤来设置Vue实例挂载（管理）的元素；
Vue实例的作⽤范围是什么呢？
Vue会管理el选项命中的元素及其内部的后代元素；
是否可以使⽤其他的选择器？
可以使⽤其他的选择器，但是建议使⽤ID选择器；
是否可以设置其他的dom元素呢？
可以使⽤其他的双标签，不能使⽤HTML和body
1.4 data：数据对象
Vue中⽤到的数据定义在data中；
data中可以写复杂类型的数据；
渲染复杂类型数据时，遵守js的语法即可；
2、本地应⽤
通过Vue实现常见的⽹页效果；
学习Vue指令，以案例巩固知识点；
Vue指令指的是，以v-开头的⼀组特殊语法；
2.1 v-text指令
v-text指令的作⽤是：设置标签的⽂本值（textContent）；
默认写法会替换全部内容，使⽤差值表达式{{}}可以替换指定内容；
2.2 v-html指令
v-html指令的作⽤是：设置元素的innerHTML；
内容中有html结构会被解析为标签；
v-text指令⽆论内容是什么，只会解析为⽂本；
2.3 v-on指令基础
v-on指令的作⽤是为元素绑定事件；
事件名不需要写on;
指令可以简写为@；
绑定的⽅法定义在methods属性中；
v-on补充：
事件绑定的⽅法写成函数调⽤的形式，可以传⼊⾃定义参数；
定义⽅法时需要定义形参来接收传⼊的参数；
事件的后⾯跟上.修饰符可以对事件进⾏限制；
.enter 可以限制触发的按键为回车；
2.4 本地应⽤-计数器
案例总结：
创建vue实例时，el(挂载点)，data（数据），methods（⽅法）；v-on指令的作⽤是绑定事件，简写为@；
⽅法中通过this关键字获取data中的数据；
v-text指令的作⽤是设置元素的⽂本值，简写为{{}}；
v-html指令的作⽤是：设置元素的innerHTML;
2.5 v-show指令
v-show指令的作⽤是：根据真假切换元素的显⽰状态；
原理是修改元素的display，实现显⽰隐藏；
指令后⾯的内容，最终都会解析为布尔值；
值为true元素显⽰，值为false元素隐藏；
2.6 v-if指令
v-if指令的作⽤是：根据表达式的真假切换元素的显⽰状态；
本质是通过操纵dom元素来切换显⽰状态；
表达式的值为true，元素存在与dom树中，为false，从dom树中移除；
频繁的切换v-show，或者v-if,v-show的切换消耗⼩；
2.7 v-bind指令
v-bind指令的作⽤是：为元素绑定属性；
完整写法是：v-bind：属性名；
简写的话可以直接省略v-bind，只保留：属性名；
需要动态的增删class建议使⽤对象的⽅式；
v-bind
2.8 案例-图⽚切换
案例总结：
列表数据使⽤数组保存；
v-bind指令可以设置元素属性，⽐如src;
v-show和v-if都可以切换元素的显⽰状态，频繁切换⽤v-show;
2.9 v-for
v-for 指令的作⽤是：根据数据⽣成列表结构；
数组经常和v-for结合使⽤；
语法是（item,index）in 数据；
2.10 v-model
v-model指令的作⽤是便捷的设置和获取表单元素的值；
绑定的数据会和表单元素值相关联；
绑定的数据和表单元素的值双向绑定；
3、⽹络应⽤
Vue结合⽹络数据开发应⽤；
3.1 axios 功能强⼤的⽹络请求库
axios内部是Ajax，封装之后使⽤更加⽅便；
1、axios必须先导⼊才可以使⽤；
2、使⽤get或post⽅法即可发送对应的请求；
3、then⽅法中的回调函数会在请求成功或失败时触发；
4、通过回调函数的形参可以获取响应内容或错误信息；
axios默认是没有jsonp 跨域请求的⽅法的。⼀般来说流⾏的做法是将跨域放在后台来解决，也就是后台开发⼈员添加跨域头信息。
<title>Title</title>
<script src="unpkg/axios/dist/axios.min.js"></script>
</head>
<body>
<input type="button" value="get请求"class="get">
<input type="button" value="post请求"class="post">
<script>
document.querySelector(".get").onclick=function(){
<("autumnfish/api/joke/list?num=6")
.then(function(success){
console.log(success);
},function(err){
console.log(err);
})
};
document.querySelector(".post").onclick=function(){
axios.post("autumnfish/api/user/reg",{username:"sansan"}) .then(function(success){
console.log(success);
},function(err){
console.log(err);
})
}
}
</script>
</body>
</html>
3.2 axios + vue
axios如何结合vue开发⽹络应⽤；
axios回调函数中的this已经改变，⽆法访问到data中的数据；
把this保存起来，回调函数中直接使⽤保存的this即可；
和本地应⽤的区别就是改变了数据来源；
<title>axios和vue结合使⽤</title>
<!--开发环境版本，包含了有帮助的命令⾏警告-->
<script src="cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<script src="unpkg/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="获取笑话" v-on:click="getJoke">
<p>{{ joke }}</p>
</div>
<script>
let app =new Vue({
el:"#app",
data:{
joke:""
},
methods:{
getJoke:function(){
let that =this;
<("autumnfish/api/joke").then(function(success){                        console.log(this);
/
/ console.log(success);
that.joke = success.data;
},function(err){
console.log(err);
})
}
}
原生js和js的区别
})
}
</script>
</body>
</html>
3.3 案例-天知道

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。