首页 > 其他分享 >vue02

vue02

时间：2023-02-14 18:46:13浏览次数：44  
标签：name vue02 url 标签 https var font

今日内容概要

  • 插值语法
  • 文本指令
  • 属性指令
  • 事件指令
  • class和style
  • 条件渲染
  • 列表渲染

今日内容详细

插值语法

vue的mvvm架构演示

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

<div id="app">  <!--将这个div交给vue接管 可以设置id和class等 一般使用id-->
    姓名：{{name}}
    <br>
    <input type="text" v-model="name"><!--v-model是将input框与变量name绑定-->

</div>
</body>
<script>
    var vm = new Vue({ // new一个vue实例
        el: '#app', // 固定写法 如果是id就#id名 如果是class那么就是.class名
        data: {  // data中定义的变量，以后直接从vm实例直接可以拿到
            name: 'lzj',
            age: 19
        }
    })
</script>
</html>

vue中的插值语法看起来和django的模板语法一样 但是有区别的

插值语法可以放的东西
	变量 对象取值 数组取值
	简单的js语法
	函数()

并且插值语法不能卸载标签属性中 只能写在标签内部

演示

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

</head>
<body>
    <div id="test">
        <p>姓名:{{name}}</p>
        <p>年龄:{{age}}</p>
        <p>爱好:{{hobby}}</p><!--展示的是所有 以数组形式-->
        <p>爱好:{{hobby[1]}}</p><!--展示的是数组中指定索引的数据-->
        <p>妻子:{{wife}}</p><!--展示的是整个对象数据 以对象形式-->
        <p>妻子:{{wife.name}}</p><!--展示的是对象中的某个数据-->
        <p>运算:{{10**3+3*3}}</p>
        <p>三目运算:{{10>20?'大于':'小于'}}</p><!--可以编写简单的js语法-->
        <p>html标签:{{a_url}}</p><!--默认不会生效 展示的是文本形式-->


    </div>
    <script>
        var vm = new Vue({
            el: '#test',
            data: {
                name: 'lzj',
                age: 18,
                hobby: ['唱歌', '跳舞', '篮球', 'rap'],
                wife: {name:'迪丽热巴', age: 18},
                a_url: '<a href="http://www.baidu.com">点我</a>'
            }
        })
    </script>
</body>
</html>

文本指令

指令是带有 v- 前缀的特殊插值语法。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。也就是作用于标签中

格式
	v-xx=""		写在标签上 原本的插值语法都能写在""中 并且不需要再加{{}}


1.v-text 直接把字符串内容渲染在标签内部
	<p v-text="name"></p>  等同于 <p>{{name}}</p>
2.v-html 把字符串的内容渲染成标签
	<p v-html="a_url"></p> 
3.v-show 等于布尔值 判断该标签是否显示 是在标签中使用样式控制是否显示 style="display:none"
	<p v-show="false">看我</p>  <!--该标签不显示 通常使用data中定义的变量来控制布尔值-->
	<p v-show="true">看我</p>
4.v-if 等于布尔值 判断该标签是否显示 整个标签直接删除 效率低 使用了dom操作
   <p v-if="true">看我</p>
   <p v-if="false">看我</p>  <!--该标签不显示-->

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

</head>
<body>
    <div id="test">
        <h2>v-text</h2>
        <p v-text="name"></p>
        <h2>v-html</h2>
        <p v-html="a_url"></p>
        <h2>v-show</h2>
        <p v-show="is_show">看我</p>
        <p v-show="is_show">看我</p>
        <h2>v-if</h2>
        <p v-if="if_show">看我</p>
        <p v-if="if_show">看我</p>

    </div>
    <script>
        var vm = new Vue({
            el: '#test',
            data: {
                name: 'lzj',
                a_url: '<a href="http://www.baidu.com">点我</a>',
                is_show: true,
                if_show: true
            }
        })
    </script>
</body>
</html>

属性指令和事件指令

"""属性指令"""
标签上的属性可以绑定变量 之后变量只要变化 那么属性的值也会跟着变化

语法
	v-bind:属性名="变量名"
可以简写
	:属性名="变量名"
    

"""事件指令"""
事件指令是指 点击事件 双击时间... 用的最多的通常是点击事件

语法
	v-on:事件名="函数"
可以简写
	@事件名="函数"

函数必须写在method的配置项中
	methods:{
        函数名:function(){
            函数体代码
        }
    }
在es6中可以简写
	methods:{
        函数名(){
            函数体代码
        }
    }

结合以上两个指令写个小案例
	点击按钮，随机切换美女图片 并且间隔1秒切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="handleClick">点我看美女</button>
        <img v-show="is_show" :src="url" alt="" width="200px">
        
        
        
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                url: 'https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg',
                is_show: false,
                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(){
                    this.is_show=true
                    var _this = this
                    setInterval(function () {
                        var i = Math.floor(Math.random() * (_this.url_list.length -1))
                        _this.url = _this.url_list[i]
                    }, 1000)
                }
            }
        })
    </script>
</body>
</html>

class和style

它们两个本身都是属性指令 不过比较特殊 应用更广泛

:class='变量'
	变量可以是字符串 数组 对象 推荐使用数组
:style='变量'
	变量可以是字符串 数组 对象 推荐使用对象

不过它们的组成方式是有要求的

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

</head>
<body>
    <div id="app">
        <p :class="classVue" :style="styleVue">看我看我</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                // classVue: 'font_color font_size', // 使用字符串 中间空格隔开
                // classVue: ['font_color', 'font_size'], // 使用数组 一个数据表示一个分类 最方便
                // classVue: {'font_color': true, 'font_size':false}, // 使用对象 键是分类名 值是布尔值 true使用该分类 false不使用该分类 麻烦
                // styleVue: 'color:red;font-size:30px', // 使用字符串 格式 样式名:样式值;样式名:样式值  中间使用分号隔开
                // styleVue: [{'color': 'red'}, {'font-size': '30px'}], // 使用数组 数组包对象的形式 多余
                styleVue: {'color': 'red', 'font-size': '30px'}, // 使用对象 最方便

            }
        })
    </script>
</body>
</html>

条件渲染

放在标签上 如果条件成立 那么该标签就显示 否则不显示

语法
	v-if=条件
	v-else-if=条件
	v-else
		上述条件都不成立 显示该标签

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

</head>
<body>
    <div id="app">
        <p v-if="score>=90">优秀</p>
        <p v-else-if="score>=80">良好</p>
        <p v-else-if="score>=70">一般</p>
        <p v-else-if="score>=60">及格</p>
        <p v-else>不及格</p>
    </div>

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

列表渲染

放在标签上 根据循环次数 渲染指定标签包括内部标签的次数

语法
	v-for="变量名 in 被循环对象"

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

</head>
<body>
    <div id="app">
        <p v-for="good in good_list">
            <span>{{good.id}}</span>
            <span>{{good.name}}</span>
            <span>{{good.price}}</span>
        </p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                good_list: [
                    {'id': 1, 'name': '秘制小汉堡', 'price': 888},
                    {'id': 2, 'name': '臭豆腐', 'price': 888},
                    {'id': 3, 'name': '腐乳', 'price': 888},
                    {'id': 4, 'name': '粑粑', 'price': 888},
                ],
            }
        })
    </script>
</body>
</html>

作业

<!--点击开始随机美女 点击美女图片停下 并且弹出图片地址-->



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="buttonClick">点我看美女</button>
        <img v-show="is_show" :src="url" alt="" width="200px" @click="imgClick">
        
        
        
    </div>

    <script>
        var timer = null
        var vm = new Vue({
            el: '#app',
            data: {
                url: 'https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg',
                is_show: false,
                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: {
                buttonClick(){
                    this.is_show=true
                    var _this = this
                    timer = setInterval(function () {
                        var i = Math.floor(Math.random() * (_this.url_list.length -1))
                        _this.url = _this.url_list[i]
                    }, 1000)
                },
                imgClick(){
                    alert(this.url)
                    clearInterval(timer)
                }
            }
        })
    </script>
</body>
</html>

标签：name,vue02,url,标签,https,var,font
From： https://www.cnblogs.com/lzjjjj/p/17120562.html

相关文章

  • day05-Vue02
    Vue027.修饰符7.1基本说明修饰符（Modifiers）是以.指明的后缀，指出某个指令以特殊方式绑定官方文档：修饰符Vue中的修饰符有：事件修饰符按键修饰符系统修饰符事件修......
  • vue02
    1.基本1.node.js是服务器(容器),是管理依赖的,跟tomcat差不多,帮助连接数据库2.安装npm,为了下载依赖-->在终端输入npminit-->生成package.json文件(相当于maven......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99