前端开发之Vue框架

一、JS循环的几种方式

1、v-for可循环的变量

循环数组：
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>v-for循环</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app01">
    <h1>循环数组</h1>
    <div v-for="(item,index) in  dataList">
        <p>列表索引第：{{index}} 位，值：{{item}}</p>
</body>
<script>
    var vm = new Vue({
        el: '#app01',
        data: {
            // 数组
            dataList: ['1', '2', '3', '4', '5']
</script>
</html>
循环对象：
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>v-for循环</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app01">
    <h1>循环对象</h1>
    <div v-for="(value,key) in dataObj">
        <p>值：{{value}}，键：{{key}}</p>
</body>
<script>
    var vm = new Vue({
        el: '#app01',
        data: {
            // 对象
            dataObj: {
                name: 'kang',
                age: 18,
                gender: 'male'
</script>
</html>
循环字符：
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>v-for循环</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app01">
    <h1>循环字符</h1>
    <div v-for="(item,index) in dataStr">
        <p>值：{{item}}，对应索引位置：{{index}}</p>
</body>
<script>
    var vm = new Vue({
        el: '#app01',
        data: {
            // 字符
            dataStr: 'Happy every day'
</script>
</html>
循环数字：
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>v-for循环</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app01">
    <h1>循环数字</h1>
    <div v-for="(item,index) in 10">
        <p>值：{{item}}，对应索引位置：{{index}}</p>
</body>
</html>
2、js的循环方式
基于索引的循环：自定义数字或根据数组内数据的个数循环
<script>
    // 方式一：自定义循环
    for (i = 0; i < 10; i++) {
        console.log(i)
   	// 方式二：基于索引循环
    var a = [1,2,3,4,5]
    for (i = 0; i < a.length; i++) {
        console.log(i)
</script>
js的in循环：获取到的是索引位置
<script>
    var a = [1, 2, 3, 4, 5]
    for (i in a) {
        console.log(i,a[i])  // i:索引的位置，a[i]：值
</script>
js的of循环：根据数组内数据的个数循环，获取到的是值（循环对象会报错）
<script>
    var a = [100, 2,99, 4, 2]
    for (i of a) {
        console.log(i)
</script>
js的forEach循环：
<script>
    var b = [1212,223,344,45,624]
    b.forEach(function (item,index){
        console.log(item,index)
</script>
jq的Each循环：需要引入jqery的cdn
<script>
	// 循环对象
    var a = {
        'name': 'kangkang',
        'age': '18',
        'gender': 'male'
    $.each(a,function(key,value){
        console.log(key,value)
   // 循环数组
	var b = [1212, 223, 344, 45, 624]
    $.each(b, function (index, item) {
        console.log(index, item)
</script>
二、Key值的解释
	在使用Vue的v-for循环时，其底层原理是将被循环的数据依次添加到页面中，若已被循环的数据局部发生改变时，按常规的理解，其底层还要重新进行一次循环，更新数据，但在Vue中可以在被循环的标签上指定一个key属性，指定该属性的值为当前被循环的值的索引位置，这样当数据只是发送局部改变时，其底层就只会将局部的数据根据索引位置添加到页面中，这样做的效果是可以提高虚拟dom操作的效率，从而提高循环效率，注意：key值必须为唯一值
 <div v-for="item in 10" :key="item">{{item}}</div>
三、数组、对象的检测与更新
		在已经被循环渲染的页面上，将数据中新增一个键值对，发现数据并没有被同步渲染出来，这是因为Vue中存在一个小的BUG，只需要用Vue.set(this.info, 'hobby', '篮球') 设置一下即可
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>v-for循环</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app01">
    <div v-for="(key,value) in dataObj">
        <p>值：{{key}}，键：{{value}}</p>
    <button @click="handleClick">点我添加数据</button>
</body>
<script>
    var vm = new Vue({
        el: '#app01',
        data: {
            // 对象
            dataObj: {
                name: 'kang',
                age: 18,
                gender: 'male'
        methods: {
            handleClick() {
                this.dataObj['hobby'] = 'read'
                // Vue.set(this.dataObj, 'hobby', 'read')
</script>
</html>
四、input事件
常用的input事件
五、v-model双向数据绑定
		在input框中输入数值时，输入后就会被js变量拿到，如果使用的是：value="变量"，的方式，页面中输入框变化，变量不会变，只有使用v-model才能够做到数据双向绑定
代码用法：
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>v-model双向数据绑定</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app01">
    <h1>常规数据绑定</h1>
    <input type="text" :value="data_str">------>{{data_str}}
    <h1>v-model 双向数据绑定</h1>
    <input type="text" v-model="model_str">------>{{model_str}}
</body>
<script>
    var vm = new Vue({
        el: '#app01',
        data: {
            data_str: '',
            model_str: '',
</script>
</html>
六、过滤案例
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
    <div class="app">
        <p>请输入要搜索的内容：<input type="text" v-model="myText" @input="handleInput"></p>
            <li v-for="item in newDataList">{{item}}</li>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            myText: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
            newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
        methods: {
            handleInput() {
                this.newDataList = this.dataList.filter(
                    item => item.indexOf(this.myText) >= 0
</script>
</html>
七、事件修饰符（了解）
        <h1>stop事件修饰</h1>
        <div @click="handleDiv">
            <p><span @click.stop="handleSpan">我是div的子标签span1</span></p>
            <p><span>我是div的子标签span2</span></p>
        <h1>self事件修饰</h1>
        <div @click.self="handleDiv">
            <p><span @click="handleSpan">我是div的子标签span1</span></p>
            <p><span>我是div的子标签span2</span></p>
        <h1>prevent阻止a标签跳转</h1>
        <p><a href="https://www.baidu.com" @click.prevent="handleA">点我进入百度搜索</a></p>
    <h1>once事件只会触发一次</h1>
    <span @click.once="handleA">点我触发事件</span>
</body>
<script>
    var vm = new Vue({
        el: '#app01',
        data: {} ,
        methods: {
            handleDiv() {
                alert('触发了div标签事件')
            handleSpan() {
                alert('触发了span1标签事件')
            handleA() {
                alert('a标签被点击了')
</script>
</html>
八、按键修饰符
		指，只要按下键盘上的某一个案件就会触发函数执行
代码介绍：
@keyup="handleKeyUp"  # 只要按下某个键就会触发函数
@keyup.enter  # enter为指定的案件，只有按下enter才会触发函数
@keyup.13  # 13是与键盘上某个按键的参照数，指只有按下对应的按键才会触发函数
代码用法：
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>v-for循环</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app01">
    <input type="text" @keyup.x="handleKeyup">
</body>
<script>
    var vm = new Vue({
        el: '#app01',
        data: {},
        methods: {
            handleKeyup(data) {
                console.log(data)
</script>
</html>
九、表单控制
		表单控制指，可以监听并input标签type属性的，实时完成数据双向绑定
text类型：
字符，绑定字符类型变量
radio：
单选，绑定字符类型变量
ckeckbox：
多选，绑定数组类型变量
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>表单控制</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app01">
    <p>用户名：</p>
    <p><input type="text" v-model="username"></p>
    <p>性别：</p>
        男：<input type="radio" v-model="gender" value="男">
        女：<input type="radio" v-model="gender" value="女">
    <p>爱好：</p>
        阅读：<input type="checkbox" v-model="hobby" value="read">
        编程：<input type="checkbox" v-model="hobby" value="python">
        运动：<input type="checkbox" v-model="hobby" value="sports">
    <span>用户输入：
        <p>{{username}}</p>
        <p>{{gender}}</p>
        <p>{{hobby}}</p>
    </span>
</body>
<script>
    var vm = new Vue({
        el: '#app01',
        data: {
            username: '',
            gender: '',
            hobby: []
</script>
</html>
1、数字过滤方法
// 补充1 ：数组的过滤方法
    // var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
    // var newDataList = dataList.filter(function (item) {
    //     return false  // return true表示这个值保留,false 表示这个值不要
    // })
    // console.log(newDataList)
2、字符串indexof方法
判断子字符串是否在当前字符串中,如果在返回的是索引，如果不在返回0以下数字
    // var s = 'lqz is handsome'
    // var s1 = 'qqq'
    // var i = s.indexOf(s1)
    // console.log(i)
3、箭头函数
		es6 的箭头函数写法---》函数中套函数，this指向有问题，有了箭头函数，箭头函数没有自己的this，用的都是上一级的this
1、 无参数，无返回值箭头函数
    var f = () => {
        console.log('函数') 
2、有一个参数，没有返回值的箭头函数  括号可以去掉,可以加
    var f = item => {
        console.log(item) 
3、有多个参数，没有返回值的箭头函数  括号不能去掉
    var f = (item, key) => {
        console.log(item) 
4、有一个参数，一个返回值
    var f =  (item)=> {
        return item + 'lqz' 
    var f = item => {
        return item + 'lqz'