VUE初识

标签：VUE console log 标签 item 初识 var name

事件修饰符（了解）

插值语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="/vue.js"></script>
</head>
<body>
  <div id="app">
    {{name}}}
      {{age}}
  </div>
</body>
<script>
  new Vue({
    el:'#app',
    data:{
        name:'lqz',
        age:19
    }
  })
</script>

</html>

# 插值语法中可以
	-变量,对象取值,数值取值
    -简单的js语法
    -函数()
    
# 插值不能在标签的属性上,只能写在标签内部

<div id="app">
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
    <p>爱好:{{hobby}}---第一个爱好:{{hobby[1]}}</p>
    <p>妻子:{{wife}}---妻子的年龄:{{wife.age}}---{{wife.['age']}}</p>
    <p>运算:{{10*2+3*4}}</p>
    <p>三目运算符【条件?'符合了':'不符合了'】:{{10>90?'大于':'小于'}}</p>
    <p>标签（默认不会渲染成标签）:{{a_url}}</p>
    <p>函数()</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'lqz',
            age: 19,
            hobby: ['篮球', '足球', '乒乓球'],
            wife: {name: '刘亦菲', age: 38},
            // 运算
            a_url: '<a href="http://www.baidu.com">点我看美女</a>'
            // 三目运算符         三元表达式
        }
    })
</script>

文本指令

指令系统
	v-xx	写在标签上,任意标签
    -v-xx=""   ---》原来插值语法中能写的,它都能写，不加{{}}

# 指令系统:vue提供的 都v-xx 写在标签属性上的,统称为指令,例如a_url必须是data中定义的变量
<p v-text="a_url"></p>

# v-text直接把字符串内容渲染在标签内部,等同于
<p v-text="a_url"></p>
    <p>{{a_url}}</p>
   
# v-html把字符串的内容渲染成标签,写在标签内部
<p v-html="a_url"></p>

# v-show 等于布尔值，该标签是否显示,样式控制显示不显示:style="display: none;"
# v-if  等于布尔值，该标签是否显示,整个标签直接删除，效率低,在dom中删除标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">

    <h2>v-text</h2>
    <p v-text="a_url"></p>
    <h2>v-html</h2>
    <p v-html="a_url"></p>
    <h2>v-show</h2>
    <img src="https://img2.woyaogexing.com/2023/02/10/f426aeefcf78b0f6e88bba4e67437409.jpeg" alt="" v-show="show" width="200px" height="200px">
    <h2>v-if</h2>
    <div v-if="show_if">
        <img src="https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg" alt=""  width="200px" height="200px">
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a_url: '<a href="http://www.baidu.com">点我看美女</a>',
            show: true,
            show_if:true
        }
    })
</script>
</html>

属性指令

# 标签上的属性可以绑定变量,以后变量变化，属性的值跟着变化

-href
-src
-name
-class
-style
-height

# 语法
	v-bing:属性名="变量名"
 # 可以简写成,以后都用简写
 :属性名='变量名'

事件指令

事件指令是:点击事件，双击事件，滑动事件。。。用的最多的点击事件click
    
    v-on:事件名="函数"
    <button v-on:click="handleClick">点我看美女</button>
    函数必须写在methods的配置项中
    methods:{
            'handleClick':function (){
                // alert('美女')
                console.log(this)  // this 就是当前vue实例，就是vm实例
                this.show=!this.show
            },  
        }
    -点击button就会触发绑定函数（handleClick）的执行
    
    
    # 可以简写成,以后都用简写
    @事件名="函数"
    
    # 小案例:点击按钮,随机切换美女图片
    -1 methods配置项中写成 这种形式  es6的对象写法
     	handleClick() {}
        如果函数中再套函数，如何内部不是箭头函数，this指向有问题，需要在外部定义一下
        var _this = this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">

    <button @click="handleClick">点我看美女</button>
    <div>
        <img :src="url" alt="" width="600px"
             height="600px">
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg',
            url_list: [
                'https://img.lesmao.vip/k/1178/T/XIAOYU/951/951_001_dj7_3600_5400.jpg',
                'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_001_k4r_3600_5400.jpg',
                'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_004_g66_3600_5400.jpg',
                'https://img.lesmao.vip/k/1178/T/XiuRen/6165/6165_001_gwy_3600_5400.jpg',
                'https://img.lesmao.vip/k/1178/T/XIAOYU/948/948_020_xcx_3600_5400.jpg',
            ]
        },
        methods: {
            // 'handleClick': function () {
            //     // var i = Math.round(Math.random() * (this.url_list.length - 1))
            //     // this.url = this.url_list[i]
            //     // console.log(i)
            //     var _this=this
            //     setInterval(function () {
            //       console.log(_this)
            //         var i = Math.round(Math.random() * (_this.url_list.length - 1))
            //         _this.url = _this.url_list[i]
            //         console.log(i)
            //     }, 1000)
            // },

            // 简写成
            handleClick() {
                var _this = this  //
                setInterval(function () {
                    console.log(_this)
                    var i = Math.round(Math.random() * (_this.url_list.length - 1))
                    _this.url = _this.url_list[i]
                    console.log(i)
                }, 1000)
            },


        }
    })


    // es 6 的对象写法
    var hobby = ['篮球', '足球']
    var f = function (a, b) {
        console.log('匿名函数')
        console.log(a + b)
    }
    // var d={'name':"lqz",age:19,'hobby':hobby}
    // var d={'name':"lqz",age:19,hobby:hobby}
    // var d = {'name': "lqz", age: 19, hobby}   // es6 的简写形式
    // var d = {'name': "lqz", age: 19, f}   // es6 的简写形式
    var d = {'name': "lqz", age: 19, handleClick(){
      console.log('xxxxx')
      }}   // es6 的简写形式
    console.log(d)
    d.handleClick()

</script>
</html>

class和style

# 本身他俩都是属性指令,但是他们比较特殊,应用更广泛,单独再讲

# class:推荐用数组
	:class="变量"
     变量可以是字符串,数组,对象
  
# style:推荐用对象
	:style="变量"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .font {
            font-size: 60px;
        }

        .red {
            background-color: red;
        }

        .green {
            background-color: green;
        }

        .font-color {
            color: yellow;
        }
    </style>
</head>
<body>

<div id="app">
    <h1>clss</h1>
    <div :class="class_obj">我是div</div>

    <h1>style</h1>
    <div :style="style_obj">我是style-----div</div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // class_str:'font',
            // class_list:['font'],   # 推荐
            class_obj: {font: true, green: false, 'font-color': false},

            style_str: 'color: green;font-size:80px',
            // style_list: [{color:'yellow'}, {'font-size':'90px'}],
            style_list: [{color: 'yellow'}, {fontSize: '90px'}],  // 可以用驼峰
            style_obj: {color: 'yellow', fontSize: '80px'}
            // style_obj: {color: 'yellow', 'font-size': '80px'}
        },

    })


</script>
</html>

条件渲染

v-if=条件,放在标签上，如果条件成立,该标签就显示,如果条件不成立，该变迁就不显示
v-else-if=条件,放在标签上，如果条件成立,该标签就显示,如果条件不成立，该标签就不显示
v-else  放在标签上，上面条件都不成立,显示这个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>

    </style>
</head>
<body>

<div id="app">
    <h1>通过分数显示文字</h1>
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score>=80&&score<90">良好</div>
    <div v-else-if="score>=60&&score<80">及格</div>
    <div v-else>不及格</div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            score: 99
        },

    })


</script>
</html>

列表渲染

  <div id="app">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6 col-lg-offset-3">
                    <div class="text-center">
                        <h1>v-if+v-for 显示购物车</h1>
                        <button @click="handClick" class="btn btn-danger">点我显示</button>
                    </div>
                    <div v-if="show">
                        <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>商品名</th>
                            <th>商品价格</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in good_list">
                            <th scope="row">{{item.id}}</th>
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>
                        </tr>
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>

  </div>
</body>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            show:false,
            good_list:[
                 {id: 1, name: '钢笔', price: '29'},
                {id: 2, name: '铅笔', price: '29'},
                {id: 3, name: '文具盒', price: '298'},
                {id: 4, name: '彩笔', price: '298'}
            ]
        },
        methods:{
            handClick(){
                this.show=!this.show
            }
        }
    })

</script>

v-for可以循环的变量

    <div id="app">
        <h1>v-for可以循环什么?</h1>
        <h2>循环数组</h2>
        <span v-for="item in l ">{{item}}}</span>
        <h2>循环数组带索引</h2>
        <span v-for="(item,index) in l ">索引是：{{index}},值是:{{item}}</span>


        <h2>循环对象,默认是value</h2>
        <div v-for="item in info">{{item}}</div>
        <h2>循环对象:值和key一起</h2>
        <div v-for="(item,key) in info">键是:{{key}},值是{{item}}</div>

        <h2>循环字符串</h2>
        <div v-for="item in s">
            <p v-if="item!=' '">{{item}}</p>
            <br v-else>

        </div>
        <h2>循环字符串带索引</h2>
        <div v-for="(item,index) in s">
            <p v-if="item!=' '">{{item}}---->索引是：{{index}}</p>
            <br v-else>
        </div>

        <h2>循环数字</h2>
        <div v-for="item in 8">{{item}}</div>
        <h2>循环数字-带索引</h2>
        <div v-for="(item,index) in 8">{{item}}----索引是：{{index}}</div>


    </div>
</body>

<script>
    new Vue({
        el:'#app',
        data:{
            l:[1,2,3],
            info:{name:"lqz",age:19},
            s:'hello world'
        }
    })

</script>

总结:可以循环的有:
        1.数组
        2.对象
        3.字符串
        4.数字

js的循环方式

//1 js 的循环 基于索引的循环   python  没有基于索引的循环，python都是基于迭代的循环
    // var a = [4, 5, 6, 7]
    // for(i=0;i<10;i++){
    // for (i = 0; i < a.length; i++) {
    //     // console.log(i)
    //     console.log(a[i])
    // }


    // 2 js 的in 循环  拿到的是索引    跟vue的v-for区分
    // var a = [4, 5, 6, 7]
    // for (i in a) {
    //     // console.log(i)
    //     console.log(a[i])
    // }

    // 3 es 6语法  of  循环
    // var a = [4, 5, 6, 7]
    // for (item of a) {
    //     console.log(item)
    // }


    // 4 数组的方法，forEach可以循环
    // var a = [4, 5, 6, 7]
    // a.forEach(function (item) {
    //     console.log('----',item)
    // })

    // 5 jq 的循环  循环数组，对象
    var a = [4, 5, 6, 7]
    $.each(a, function (index, item) {
        console.log(index)
        console.log(item)

    })

key值的解释

vue的v-for写在标签上,在标签上加一个key,用属性指令绑定一个变量,key的值每次都不一样,这样可以加速虚拟dom的替换,从而提高循环效率,key值必须唯一
<div v-for="item in 8" :key="item">{{item}}</div>
        
# 尽量写上

数字,对象的检测与更新

对象,新增一个key-value,发现页面没有变化,以后用 vue.set(this.info,'hobby','篮球')
设置一下即可

<body>
    <div id="app">
        <h1>循环对象</h1>
        <div v-for="(value,key) in info">
            <h3>key值是:{{key}}</h3>
            <h2>value是{{value}}</h2>
        </div>

            <button @click="handleAdd">点我加数据</button>
    </div>
</body>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            info:{name:'lqz',age:19},
        },
        methods:{handleAdd(){
            // 页面会变化
            // this.info['name'] = '彭于晏'
            // 页面不会变化,单是值有了
            // this.info['hobby'] = ['篮球']
            //遇到数据变了,页面没变,都是用
            Vue.set(this.info,'hobby','篮球')
            }

        }
    })

</script>

input事件

input的事件：
	click   点击的时候触发
     change  当元素的值发生改变时触发
     blur    当输入框失去焦点的时候,触发的事件
     focus   当获得焦点触发事件

<body>
    <div id="app">
    <h1>点击事件</h1>
        <input type="text" @click="handClick">

    <h1>失去焦点</h1>
        <input type="text" @blur="handBlur">

    <h1>input事件,只要输入,就会触发</h1>
        <input type="text" @input="handInput">

    <h1>change事件</h1>
        <input type="text" @change="handChange">

    <h1>focus事件</h1>
        <input type="text" @focus="handFocus">


    </div>
</body>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            info:{name:'lqz',age:19},
        },
        methods:{handClick(){
                console.log('我被点击了')
            },
            handBlur(){
            console.log('失去焦点')
            },
            handInput(){
            console.log('正在输入')
            },
            handChange(){
            console.log('变了变了')
            },
            handFocus(){
            console.log('获得焦点')
            }
        }
    })

</script>

v-model双向数据绑定

input 可以输入值,输入后,就会js变量拿到,如果使用:value='变量'这种形式,页面中输入框变化,变量不会变,使用v-model做双向数据绑定

<div id="app">
  <h1>单向数据绑定</h1>
    <input type="text" :value="name">-----{{name}}---单向数据绑定

    <h1>双向数据绑定</h1>
    <input type="text" v-model="name">-----{{name}}


</div>
</body>

<script>
    var vm= new Vue({
        el:'#app',
        data:{name:'lqz',age:18}
    })

</script>

过滤案例

<div class="app">
    <h1>过滤案例</h1>
    <p>请输入要搜索的内容: <input type="text" v-model="myText" @input="handInput"></p>
</div>


</body>

<script>
    var vm = Vue({
        el: '.app',
        data: {
            myText: '',
            dateList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
            newdateList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
        },
        methods: {
            handInput() {
                // this.newdateList = this.dateList.filter(item=>{
                // // 判断item在不在mytext中
                // if (item.myText.indexOf(item)>=0){
                //     return true}
                // else
                // {return false}
                // 上面5行,简写成
                // return item.indexOf(this.myText)>=0
                this.newdateList = this.dateList.filter(
                    item => item.indexOf(this.myText) >= 0
                )
            }
        }  
        
    })


    // 补充1:数组的过滤方法
    // var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
    // var newdataList = dataList.filter(function (item){
    //     return false  //return true标识这个值保留，false标识这个值不要
    // })

    //补充2:字符串的index()方法,判断子字符串是否在当前字符串中,如果返回的是索引,如果不是返回-1
    // var s='lqz is handsome'
    // var s1='qqq'
    // var i =s.indexOf(s1)
    // console.log(i)  // -1 不在索引中,所以大于等于0就是在索引中
    // 补充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,key)
    // }
    // 4 有一个参数,一个返回值
    // var f=(item)=>{
    //     return item+'lqz'
    // }
    // var f=item=>item+'lqz'
    // var res=f('lqz')
    // console.log(res)
</script>

事件修饰符（了解）

事件修饰符	释义
.stop	只处理自己的事件，子控件冒泡的事件不处理（阻止事件冒泡）
.self	只处理自己的事件，子控件冒泡的事件不处理
.prevent	阻止a链接的跳转
.once	事件只会触发一次（适用于抽奖页面）

学过事件:click,change,input
    
   修饰click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div>
    <div class="app">
        <h1>事件修饰符stop，子控件不再冒泡给父控件</h1>
        <ul @click='handleUl'>
            <li @click.stop="handleLi">第一</li>
            <li>第二</li>
        </ul>

        <h1>事件修饰符self:只处理自己的事件，子控件的冒泡，不处理</h1>
        <ul @click.self='handleUl'>
            <li @click="handleLi">第一</li>
            <li>第二</li>
        </ul>

        <h1>prevent阻止a的跳转</h1>
        <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>

        <h1>once 只响应一次</h1>
        <button @click.once="handleClick">点我抽奖</button>
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {},
        methods: {
            handleLi() {
                console.log('li被点击了')
            },
            handleUl() {
                console.log('ul被点击了')
            },
            handleA() {
                console.log('a标签被点了')
                // 阻止a的跳转，自己决定要不要跳
                // 手动指定跳
                location.href = 'http://www.cnblogs.com'

            },
            handleClick() {
                console.log('我被点了')
            }
        }

    })
</script>
</html>

按键修饰符

# 按键事件:按了键盘某个键,就会触发函数的执行
@keyup = "handleKeyUp"

# 按键修饰符:只有某个按键被按下才触发
@keyup.enter
@keyup.13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div>
    <div class="app">
        <!--        <input type="text" v-model="text" @keyup="handleKeyUp">-&ndash;&gt;{{text}}-->
        <!--        <input type="text" v-model="text" @keyup.13="handleKeyUp2">-&ndash;&gt;{{text}}-->
        <input type="text" v-model="text" @keyup.enter="handleKeyUp2(1,$event)">--->{{text}}
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            text: ''
        },
        methods: {
            handleKeyUp(event) {
                // console.log('按键被按下了')
                // keyCode 对照表https://blog.csdn.net/zqian1994/article/details/109486445
                // console.log('按钮被按下了：', event.key, event.keyCode)
                if (event.keyCode == 13) {
                    console.log('开始跟后端交换搜索了')
                }
            },
            handleKeyUp2(a, event) {
                console.log(event)
                console.log('enter被按了')
            }

        }

    })
</script>
</html>

表单控制

input ---》变量类型是什么？

text 类型
radio:单选
checkbox:单选和多选

<body>
  <div id="app">
        <p>用户名: <input type="text" v-model="username"> </p>
        <p>密码: <input type="password" v-model="password"> </p>
        <p>性别:
            男<input type="radio" v-model="gender" value="1">
            女<input type="radio" v-model="gender" value="2">
        </p>
        <p>
            记住密码: <input type="checkbox" v-model="remember">
        </p>
        <p>
            篮球: <input type="checkbox" v-model="hobby" value="篮球">
            足球: <input type="checkbox" v-model="hobby" value="足球">
            排球: <input type="checkbox" v-model="hobby" value="排球">
        </p>
        <button @click="handClick">提交</button>


  </div>
</body>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            username:'',
            password:'',
            gender:'',  // radio单选,多个radio绑定同一个变量,选中某个，就对应value值
            remember:false,  //checkbox 单选是true或者false
            hobby:[]   // checkbox 多选是数组类型,必须一开始定义就是数组,多个checkbox绑定一个变量
        },
        methods:{
            handClick(){
                console.log(this.username,this.password,this.gender,this.remember,this.hobby)
            }
        }
    })

</script>

补充

# python的海象运算符   Pyhton 3.9
a:=10

标签：VUE,console,log,标签,item,初识,var,name
From： https://www.cnblogs.com/zhanghong1229/p/17124429.html

插值语法

文本指令

属性指令

事件指令

class和style

条件渲染

列表渲染

v-for可以循环的变量

js的循环方式

key值的解释

数字,对象的检测与更新

input事件

v-model双向数据绑定

过滤案例

事件修饰符（了解）

按键修饰符

表单控制

补充

相关文章

赞助商

阅读排行