Vue-模板语法、指令

一、模板语法

插值语法

最后都渲染成了字符串

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>渲染字符串-姓名：{{name}}</p>
    <p>渲染字符串-年龄：{{age}}</p>
    <p>渲染数组-数组：{{list1}}</p>
    <p>渲染数组-数组-按位置取值：{{list1[1]}}</p>
    <p>渲染对象-对象：{{obj1}}</p>
    <p>渲染对象-对象-按key取值:{{obj1.name}}</p>
    <p>渲染对象-对象-按key取值:{{obj1['age']}}</p>
    <p>渲染标签字符串(处理了xss攻击)：{{link1}}</p>
    <p>三目运算符(运算完的结果被渲染)：{{10 > 9 ? 1 : 2}}</p>
    <p>三目运算符：{{list1.length>2?"大于2":"小于2"}}</p>
    <p>简单表达式：{{1+23}}</p>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'hh',//字符串
            age: 19,//数值
            list1: [1, 2, 3, 4],//数组
            obj1: {name: 'hh', age: 19},//对象
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        },
    })
    //结果会在Console台打印
    var list1=[1,2,3,4]
    var res=list1.length>2?'大于1':'小于1'
    console.log(res)
</script>
</html>

结果：

二、指令

文本指令

Vue的指令系统，放在标签，以v- 开头的，每个指令都有特殊的用途

v-text：把字符串内容渲染到标签内部

v-html：把字符串内容渲染到标签内部，但如果是标签字符串，会被渲染出标签

v-show：控制标签显示与否：通过style的display是否等于none控制，在html中还存在这个标签，布尔值为true，则显示，为false就不显示

v-if：控制标签显示与否：通过dom操作做的，这个标签从dom中删除了，布尔值为true，则显示，为false就不显示

注:v-show 和v-if的区别：

v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入标签

v-text：标签内容显示js变量对应的值　　v-html：让HTML渲染成页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id ='app'>
<h3>v-text:会把字符串渲染到标签内部</h3>
    <p v-text="name"></p>
    <p v-text="link1"></p>
<h3>v-html：会把字符串渲染到标签内部，但是如果是标签字符串，会被渲染成标签</h3>
    <p v-html="name"></p>
    <p v-html="link1"></p>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            name:'hh',
            link1:'<a href="https://www.baidu.com">百度一下 点我知道</a>'
        }
    })

</script>
</html>

结果：

v-show：显示/隐藏内容　　v-if：显示/删除内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id ='app'>
<h3>v-show:通过控制style的display是否等于none来控制标签的显示与否，标签还在html中</h3>
    <div>
        <span v-show="isShow">我是：isShow=true</span>
    </div>
<h3>v-if:通过dom操作来控制标签的显示与否</h3>
    <span v-if="isShow1">我是：isShow1=true</span>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            name:'hh',
            link1:'<a href="https://www.baidu.com">百度一下 点我知道</a>',
            isShow:true,
            isShow1:true,
        }
    })
</script>
</html>

当开始设置isShow=true，isShow1=true时：

当在Console台将isShow改为false，isShow1改为false时：

结果：

再次都改成true时：

结果：v-show控制的标签，style中的没有写display：none

案例：通过点击按钮来控制显示和消失

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id='app'>
    <div>
        <button v-on:click="handleShow">点我</button>
        <span v-if="isCreated">isCreated</span>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'lqz',
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
            isShow: true,
            isShow2: true,
            isCreated: false
        },
        methods: {
            handleShow() {
                this.isCreated = !this.isCreated

            }
        }
    })

</script>
</html>

结果：

当点击按钮时：

2. 事件指令

用 v-on 绑定事件后，只要触发事件，就会执行函数

v-on：点击事件，双击事件，滑动事件=‘函数’，用的最多的就是click事件，单击事件

v-on：click=‘函数’ ---》放在标签上，点击标签，就会触发函数执行，函数必须写在methods中

v-on：click可以简写为 ---》@click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="handleClick">点我</button>
    <br>
    <button @click="handleClick1">点我：如果不传，默认第一个参数是 ：点击事件对象：PointerEvent</button>
    <br>
    <button @click="handleClick1(1)">点我:传一个参数，只要传了参数，点击事件对象就不传入了</button>
    <br>
    <button @click="handleClick1(1,2)">点我:传两个参数，正常使用</button>
    <br>
    <button @click="handleClick1(1,2,3)">点我:传三个参数，只用前两个</button>
    <br>
    <button v-on:click="handleClick1(1,$event)">点我，传参数,第一个是数字，第二个是点击事件</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            // handleClick: function () {
            //     alert('123')
            // }
            // es6 语法
            handleClick() {
                alert('123')
            },
            handleClick1(a,b) {
                console.log(a,b)
            }
        }
    })
</script>
</html>

结果：

3. 属性指令

每个标签都会有属性，动态替换属性的值，就要用到属性指令

v-bind：属性=‘变量’ ---》针对所有标签的所有属性

v-bind：属性=‘变量’ 可以简写为----》：属性=‘变量’

eg：

　　：id =‘变量’

　　：name=‘变量’

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
    <style>
        .red {
            color: rgba(248, 126, 126, 0.7);
        }

        .purple {
            color: rgba(150, 150, 243, 0.7);
        }
    </style>
</head>
<body>
<div id="app">
    <h4>点击显示图片</h4>
    <button @click="handleClick">点我显示帅哥</button>
    <br>
    <button @click="handleClick1">点我帅哥变大</button>
    <br>
    <img :src="img_url" :height="height" :width="width">
    <h2>class属性</h2>

    <button @click="handleChangeClass">点我变class</button>
    <div :class="isActivate?'red':'purple'">
        <h3>我是一个div</h3>
    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            img_url: '',
            height: '200px',
            width: '200px',
            isActivate: true
        },
        methods: {
            // 点击显示帅哥
            handleClick() {
                this.img_url = './img/2.png'
            },
            // 点击帅哥变大
            handleClick1() {
                this.height = '400px'
                this.width = '400px'
            },
            // 点击切换颜色属性
            handleChangeClass() {
                this.isActivate = !this.isActivate
            }
        }
    })
</script>
</html>

结果：

当点击按钮时：

点击换色：

案例：切换图片，点击就修改src属性

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
    <style>
        .red {
            color: rgba(248, 126, 126, 0.7);
        }

        .purple {
            color: rgba(150, 150, 243, 0.7);
        }
    </style>
</head>
<body>
<div id="app">
    <h1>点击按钮，切换图片</h1>
    <button @click="handleChange">点我换帅哥</button>
    <img :src="img_url2" height="400px" width="400px">
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // 切换图片
            img_url2:'./img/1.png',
            img_list:['./img/1.png','./img/2.png','./img/3.png','./img/4.png','./img/5.png',]
        },
        methods: {
            // 点击切换图片
            handleChange(){
                // Math.random()   0--1 之间的小数
                // this.img_list.length 数组长度，当Math.random()为0.5时，img_list.length=5时，长度为5
                this.img_url2=this.img_list[Math.floor(Math.random()*this.img_list.length)]
            }
        }
    })
</script>
</html>

结果，当点击按钮时：

4. style和class

数据的绑定

语法：`:属性名='js变量/js语法'`

:class='js变量、字符串、js数组'

class：三目运算符、数组、对象{red: true}

:style='js变量、字符串、js数组'

style：三目运算符、数组[{backgreound: 'red'},]、对象{background: 'red'}

style的绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
    <style>
        .sizer {
            font-size: 30px;
        }
        .background {
            background-color: rgba(150, 150, 243, 0.7);
        }
    </style>
</head>
<body>
<div id="app">
    <h3>style绑定字符串、数组、对象</h3>
    <div :style="style_obj">
        <button @click="handleXi">点击字体变细</button>
        <button @click="handleFont">点击字体变小</button>
        <p>我是div内的p</p>
    </div>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            // style是字符串类型
            style_str:'background: lightblue;font-size:30px;font-weight:bold',
            // style是数组类型
            style_list:[{'background':'lightblue'},{'font-size':'30px'},{fontWeight: 'bold'}],
            // style是对象类型(建议用对象类型，方便修改)
             style_obj: {'background': 'lightblue', fontSize: '30px', 'font-weight': 'bold'},
        },
        methods:{
            // 点击字体变细
            handleXi(){
                // 字符串
                // this.style_str='background: lightblue;font-size:30px;'
                this.style_list.pop()
            },
            //点击字体变小
            handleFont(){
                this.style_obj.fontSize='10px'
            }
        }
    })
</script>
</html>

结果：

点击字体变细：

点击字体变小：

class的绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
    <style>
        .size {
            font-size: 30px;
        }
        .background {
            background-color: rgba(150, 150, 243, 0.7);
        }
    </style>
</head>
<body>
<div id="app">
    <h3>class绑定字符串、数组、对象</h3>
    <div :class="class_list">
        <button @click="handleClick">点击去除背景</button>
        <button @click="handleClick1">点击字体变小</button>
        <button @click="handleClick2">点字体变大</button>
        <p>我是div的span</p>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // 去除背景
            handleClick() {
                //字符串
                // this.class_str = 'size'
                // pop 删除最后一个元素
                this.class_list.pop()
            },
            // 点击字体变小
            handleClick1() {
                //删除size:删除数组第一个元素用shift
                this.class_list.shift()
            },
            //点击字体变大
            handleClick2() {
                // push :往数组里加值
                this.class_list.push('size')
            }
        }
    })
</script>
</html>

结果：

点击去除背景：

点击字体变小：

点击字体变大：

5.条件渲染：

　　v-if
　　v-else-if
　　v-else

小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <span v-if="score>=90">优秀</span>
    <span v-else-if="score>=80&&score<90">良好</span>
    <span v-else-if="score>=60&&score<80">及格</span>
    <span v-else>不及格</span>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            score:99
        }
    })
</script>
</html>

结果：

当score=99时

当 vm.score=78时：

当vm.score=59时：

6. 列表渲染：v-for

v-for能循环的：数组、对象、数字、字符串

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h4>循环列表</h4>
                <p v-for="(value,index) in girls_list">第{{index+1}}个女神是：{{value}}</p>
                <h4>循环对象</h4>
                <p v-for="(value,key) in user_obj">key值是：{{key}},value值是：{{value}}</p>
                <h4>循环字符串</h4>
                <p v-for="(value,index) in str">第{{index+1}}个字母是:{{value}}</p>
                <h4>循环数字</h4>
                <p v-for="i in 10">{{i}}</p>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            girls_list:['杨幂','高圆圆','孙千','倪妮'],
            user_obj:{'username':'方圆','age':19,'height':175},
            str:'hello world'
        }
    })
</script>
</html>

结果：

数组、对象：

字符串：

数字：

小案例：

购物车：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <!--占六分且居中-->
            <div class="col-md-6 col-md-offset-3">
                <div class=text-center>
                    <button class="btn btn-success" @click="handleShow">显示购物车</button>
                    <button class="btn btn-danger" @click="handleDelete">删除最后一条</button>
                </div>
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>id号</th>
                        <th>商品名字</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>
                        <td>{{item.count}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            good_list:[]
        },
        methods:{
            // 展示购物车
            handleShow(){
                this.good_list=[
                    {id:1,name:'洗面奶',price:89,count:2},
                    {id:2,name:'水乳',price:299,count:1},
                    {id:3,name:'散粉',price:115,count:5},
                    {id:4,name:'定妆喷雾',price:78,count:1},
                    {id:5,name:'口红',price:135,count:3},
                    {id:6,name:'眼线笔',price:59,count:4},
                ]
            },
            //删除最后一条
            handleDelete(){
                this.good_list.pop()
            }
        }
    })
</script>
</html>

结果：

点击显示购物车：

点击删除最后一条：

解决跨域问题：

Views文件中：

　　headers['Access-Control-Allow-Origin'] = '*'

前端页面：

使用axios：

　　要先导入：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>，才能使用

posted @ 2023-09-15 22:00 Maverick-Lucky 阅读(121) 评论(0) 收藏举报

刷新页面返回顶部

Vue-模板语法、指令

一、模板语法

插值语法

二、指令

文本指令

注:v-show 和v-if的区别：

v-text：标签内容显示js变量对应的值 v-html：让HTML渲染成页面

v-show：显示/隐藏内容 v-if：显示/删除内容

案例：通过点击按钮来控制显示和消失

2. 事件指令

v-on：点击事件，双击事件，滑动事件=‘函数’，用的最多的就是click事件，单击事件

3. 属性指令

案例：切换图片，点击就修改src属性

4. style和class

数据的绑定

语法：:属性名='js变量/js语法'

style的绑定：

class的绑定：

5.条件渲染：

v-if v-else-if v-else

小案例：

6. 列表渲染：v-for

index.html：

数组、对象：

字符串：

数字：

小案例：

解决跨域问题：

headers['Access-Control-Allow-Origin'] = '*'

公告

v-text：标签内容显示js变量对应的值　　v-html：让HTML渲染成页面

v-show：显示/隐藏内容　　v-if：显示/删除内容

语法：`:属性名='js变量/js语法'`

　　v-if
　　v-else-if
　　v-else

　　headers['Access-Control-Allow-Origin'] = '*'