vue学习笔记

vue

Ajax

一种浏览器通过js异步发起请求。局部更新页面的技术。

1 vue简介

• JavaScript框架
• 简化dom操作
• 响应式数据驱动

2 第一个vue程序

• 导入开发版本的vue.js
• 创建vue实例对象，设置el和data属性
• 使用简介的模板语法把数据渲染到页面上

2.1 导入vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2.2 创建对象

<div id="app">
	{{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
  }
})
</script>

Hello Vue!

2.3 el

挂载点

• vue实例作用范围：
  • el选项命中的元素
  • 及其内部的后代元素
• 是否可以使用其他选择器？
  • 可以
  • 建议使用id选择器
• 是否可以设置其他的dom元素？
  • 可以使用其他的双标签
  • 不能使用和

2.4 data

• vue用到的数据定义在data中
• data中可以写复杂类型的数据
• 遵守js语法即可

3 vue指令

3.1 v-text

• 设置标签的内容（textContent）
• 默认写法替换全部内容，使用差值表达式{{}}可以替换指定内容
• 无论内容是什么，只会解析为文本

<div id="app">
	<h2 v-text="message"></h2>  //Hello Vue!
    <h2>
        你好{{message}}      //你好Hello Vue!
    </h2>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
  }
})
</script>

3.2 v-html

• 设置标签的innerHTML
• 内容中有html结构会被解析为标签

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message:"<a href='www.baidu.com'>百度</a>"
  }
})
</script>

3.3 v-on

• 为元素绑定事件
• 绑定方法定义在methods属性中
• 事件名不需要on
• 指令可以简写为@

<input type="button" value="v-on指令" v-on:click="diIt">

<input type="button" value="v-on指令" @click="diIt"> //简写为@

<script>
    var app = new Vue({
        el: '#app',
        data: {
            food:"西红柿"
  },
        methods:{
            doIt:function(){
                alert("do it!")
            },
            changefood:function(){
                this.food+="好吃!"
            }
        }
        
})
</script>

3.3.1 v-on补充

• 传递自定义参数，事件修饰符
• 事件绑定的方法写成函数调用的形式，可以传入自定义参数
• 定义方法时需要定义形参来接收传入打的实参
• 事件的后面跟上 .修饰符 可以对事件进行限制
• .enter可以限制触发的按键为回车

<input type="button" value="点击" @click="doIt(111,'222')"><script>	var app=new Vue({    methods:{        doIt:function(p1,p2){            alert(p1,p2);        }    }        })</script>

3.4 v-show

• 根据表达式的真假，切换元素的显示和隐藏
• 原理是修改元素的display，实现显示隐藏
• 指令后面的内容，最终都会解析为布尔值
• true显示，false隐藏

<img v-show="isShow" src="..." alt=""><img v-show="true" src="..." alt=""><img v-show="age>=18" src="..." alt="">

3.5 v-if

• 根据表达式的真假，切换元素的显示和隐藏（操纵dom与元素）
• 本质通过操纵dom元素切换显示状态
• true，元素存在于dom树中，false，从dom树中移除
• 用法同v-show

3.6 v-bind

• 设置元素的属性（src，title，class…）
• 需要动态增删class建议使用对象方式
• 缩写： :属性名

<img v-bind:src="图片地址" alt="" :title="" class="{active:isActive}">

3.7 v-for

• 根据数据生成列表结构
• 数组经常和v-for使用
• 语法：（item，index）in 数据
• item和index可以结合其他指令一起使用
• 数组长度的更新会同步到页面上，是响应式的

<div id="app"><ul>    <li v-for="(item,index) in arr">    {{index}}{{item}}    </li></ul><h2 v-for="item in vegetables" :titles="item.name">    {{item.name}}</h2>        </div><script>	var app=new Vue({        el="#app",        data:{        arr:["北京","上海"],        vegetables:[        {name:"西蓝花"},        {name:"西红柿"}    ]    },    })</script>

3.8 v-model

• 便捷的设置和获取表单元素的值
• 绑定的数据会和表单元素值相关联
• 绑定的数据<---------->表单元素的值

<input type="text" v-model="message"> //修改这里面的数据<h2>    {{message}} //这里会显示修改的</h2><script>	var app=new Vue({        el="#app",        data:{      	message:"hello"    },    })</script>

4 axios

• 在线地址

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

• 使用get或post方法即可发送对应的请求
• then方法中的回调函数会在请求成功或失败时触发
• 通过回调函数的形参可以获取响应内容或错误信息