vue学习记录

vue学习记录

1.Javascript框架

2.简化Dom操作

3.响应式数据操作
VS Code 安装live Server 可以动态更新代码改变

1.Vue基础
文档传送门 https://cn.vuejs.org 作者推荐

bootstrap 上的中文文档 https://vuejs.bootcss.com/guide/

例子

{{ message }}

{{obj.name}} 的联系方式：{{obj.mobile}}

    <ul>
        <li>{{native[0]}}</li>
        <li>{{native[1]}}</li>
        <li>{{native[2]}}</li>
    </ul>
  </div>

2.本地应用 创建vue实例时：el(挂载点),data(数据),methods(方法)

v-text v-html v-on基础 v-show v-if v-bind v-for v-on补充 v-model

实例应用知识点

1.内容绑定，事件绑定
v-text  设置标签的文本值
	<h2 v-text="message+'!'"> </h2>  这种写法会替换所有内容
 	 <h2 > 深圳{{message+"!"}}</h2>  差值表达式 可以替换局部内容
v-html  设置标签的innerhtml  插入element  
	 <p v-html="content"></p>	可以解析成html元素
  	 	<p v-text="content"></p>	只能解析成文本
v-on   为元素绑定事件
v-on可以替换为@
	<input type="button" value="v-on指令" v-on:click="doIt">
    		<input type="button" value="v-on指令" @click="doIt">

	var app2 = new Vue({
		 el: '#app2',
		 methods:{
			 doIt:function(){
  				alert("做It");
		 	 }
		      }
		})
    
this  在medthods  可以拿到数据并可以改变他

创建vue实例时：el(挂载点),data(数据),methods(方法)

2.显示切换，属性绑定

v-show 与v-if区别 show只是隐藏 if则移除，频繁使用的元素用show，否则用if

v -show    原理是修改元素的display
	 <img v-show="isShow" src="./img/p3.jpg" alt="">
	var app = new Vue({
	 el: '#app',
	data: {
	 isShow:false

	 },

	 }

	})

v-if 根据表达式值的真假，切换元素的显示和隐藏（操纵dom元素）本质是添加或移除dom元素

 	 <h1 v-if="temperature>=35">热死了</h1>
	var app = new Vue({
	 el: '#app',
	data: {
	 temperature:10

	 },

	 }

	})

v-bind 设置元素的属性（比如：src,title,class）

	v-bind:src  可以省略直接用冒号代替  :src就是代表动态绑定属性

3.列表循环，表单元素绑定

v-for  根据数据成成列表结构

数组经常和v-for 结合使用

语法是(item,index) in 数据

item和index 可以结合其他指令一起使用

数组长度的更新会同步到页面上，是响应式的

v-on 补充 传递自定义参数，事件修饰符

	1.事件绑定的方法写成函数调用的形式，就可以传入自定义参数

	2.定义方法时需要定义形参来接收传入的实参

	3.事件后面跟上.修饰符  可以对事件进行限制

	4. .enter可以限制触发的按键为回车
	   v-on splice是删除元素

v-model 获取和设置表单元素的值（双向数据绑定）

表单元素值  记住
	1.v-model 指令的作用是便捷的设置和获取表单元素的值

	2.绑定数据会和表单元素值相关联

	3.绑定的数据  与 表单元素值  双向绑定

3.网络应用

知识点：axios  网络请求库    axios+vue结合vue一起使用     

axios请求库依赖

axios.get(地址?key=value&key=value&key=value).then(function(response){},function(err){})

axios.post(地址,{key:value,key:value}).then(function(response){},function(err){})

要点：
 axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数可以获取响应内容或错误信息

官网：https://github.com/axios/axios

axios回调函数中的this已经改变，我发访问到data中数据
解决方案：把this保存起来，回调函数中直接使用保存this即可

天知道应用

注意事项  应用的逻辑代码建议和页面分离，使用单独的js文件编写
	axios回调函数中this指向改变了，需要额外的保存一份

点击查询要点： 自定义参数可以让代码的复用性更高
	 methods中定义的方法内部,可以通过this关键字点出其他的方法