526互联

vue-day02

发布时间 2023-09-15 16:36:25作者: Py玩家

模版语法

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>模版语法的渲染</h1>
    <p>渲染字符串：{{ name }}</p> //渲染到浏览中还是字符串
    <p>渲染数字：{{ age }}</p> //渲染到浏览中是字符串
    <p>渲染数组：{{ list }}</p>//渲染到浏览中是字符串
    <p>渲染对象：{{ obj1 }}</p>//渲染到浏览中是字符串
    <p>渲染字符串中的标签：{{ link1 }}</p>//渲染到浏览中是字符串，可以防止xss攻击
</div>

<script>
    var defult = new Vue({
        el: '#app',
        data: {
            name: 'ccy',
            age: 18,
            list: [1, 2, 3],//数组
            obj1: {name: 'lqz', age: 19}, // 对象
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        }
    })
</script>
</body>
</html>

展示效果

 

文本指令

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

v-text：把字符串内容渲染到标签内部
v-html：把字符串内容渲染到标签内部，但如果是标签字符串，会渲染成标签
v-show：控制标签是否显示，通过style的display是否等于none控制，在html中还存在
v-if：控制标签显示与否:通过dom操作做的，这个标签从dom中删除

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>v-text,v-html</h1>
    <p v-text="name"></p>
    <p v-html="url"></p>

    <h1>v-show,v-if</h1>
    <p v-show="isshow">zjz</p>
    <p v-if="isshow2">zjz1</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'cy',
            url: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
            isshow:true, //修改为false就浏览器中就不显示，但是在
            isshow2:false,
        }
    })
</script>
</html>

效果

 

 

事件指令

用v-on绑定事件后，只要触发事件，就会执行函数
v-on:点击事件，双击事件，滑动事件 ='函数'
用的最多的就是click事件 ，单击事件
v-on:click=‘函数’》》》放在标签上，点击标签，就会触发函数执行》》》函数必须写在methods中，可以用es6语法的简写
 methods: {
            // handleClick: function () {
            //     alert('美女')
            // }
            handleClick() {  // es6 语法
                alert('美女')
            },
        }
v-on: 可以使用 @ 替换

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">
    <h1>事件指令</h1>
    <button v-on:click="handleClick">点我，弹美女</button>
    <br>
    <button v-on:click="handleClick1">点我，传参数,如果不传，默认第一个参数是 ：点击事件对象：PointerEvent</button>
    <br>
    <button v-on:click="handleClick1(1)">点我，传参数,传一个参数，只要传了参数，点击事件对象就不传入了</button>
    <br>
    <button v-on:click="handleClick1(1,2)">点我，传参数,传两个参数，正常使用</button>
    <br>
    <button v-on:click="handleClick1(1,2,3)">点我，传参数,传多个参数，只用前两个</button>
    <br>
    <button v-on:click="handleClick1(1,$event)">点我，传参数,第一个是数字，第二个是点击事件</button>

    <h1>v-on: 简写  @ </h1>
    <button @click="handleClick">点我，弹美女</button>
</div>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
           
            handleClick() {  // es6 语法
                alert('美女')
            },
           
        }
    })

</script>
</html>

es6对象写法

es6对象写法
var userinfo={"username":"lqz","password":"123"}
var userinfo={username:"lqz",password:"123"}
var username="lqz"
var password="123"
var userinfo={username:username,password:password}
var userinfo={username,password}  // 放个变量到对象中，会一变量名作为key，值作为value
console.log(userinfo['username'])
console.log(userinfo.username)
var printName=function () {
           console.log(this.username)
     }

 

属性指令

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

v-bind:属性='变量'  ---》针对所有标签的所有属性  id name
 简写成  :属性='变量'
    :id='变量'
    :name='变量'
        
        
切换图片案例--》点击就修改src属性

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .red {
            color: rgba(248, 12, 12, 0.7);
        }

        .purple {
            color: rgba(27, 27, 171, 0.7);
        }
    </style>
</head>
<body>
<div id="app">
    <h1>属性指令</h1>

    <div>
        <button @click="handleClick">点我显示美女</button>
        <br>
        <button @click="handleClick1">点我变大美女</button>
        <br>
        <!--        <img v-bind:src="img_url" v-bind:height="height" v-bind:width="width">-->
        <img :src="img_url" :height="height" :width="width">
    </div>
    <hr>
    <h1>点击按钮，切换图片</h1>
    <button @click="handleChange">点我换美女</button>
    <img :src="img_url2" height="400px" width="400px">


    <h2>class属性</h2>

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

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            img_url: '',
            height: '400px',
            width: '400px',

            img_url2: './img/1.jpeg',
            img_list: [],
            isActivate: false

        },
        methods: {
            handleClick() {
                this.img_url = './img/1.jpeg'
            },
            handleClick1() {
                this.height = '500px'
                this.width = '500px'

            },
            handleChange() {
                // Math.random()   0--1 之间的小数
                // this.img_list.length 数组长度  3
                this.img_url2 = this.img_list[Math.floor(Math.random() * this.img_list.length)]
            },
            handleChangeClass() {
                this.isActivate = !this.isActivate

            }
        }

style和class

html

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

        .back {
            background-color: greenyellow;
        }


    </style>
</head>
<body>
<div id="app">
    <h1>class和style:能够绑定什么类型的变量：字符串，数组，对象</h1>

    <h2>style绑定字符串，数组，对象</h2>
    <div :style="style_obj">
        <button @click="handleXi">点击变细</button>
        <button @click="handleFont">点击字变小</button>
        <p>我是div内的p</p>
    </div>
    <h2>class绑定字符串，数组，对象</h2>
    <div :class="class_obj">
        <button @click="handleClick1">点击去掉背景</button>
        <button @click="handleClick2">点击子变大</button>
        <button @click="handleClick3">点击子变小</button>
        <p>我是div内的p</p>
    </div>


</div>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // style是字符串类型
            style_str: 'background: red;font-size: 60px;font-weight: bold',
            // style是数组类型
            style_list: [{'background': 'red'}, {fontSize: '60px'}, {fontWeight: 'bold'}],
            // style:是对象类型(建议用对象)
            style_obj: {'background': 'red', fontSize: '60px', 'font-weight': 'bold'},

            // class 是字符串类型
            class_str: 'big back',
            // class 是数组类型--->推荐用它
            class_list: ['big', 'back'],
            // class 是对象类型
            class_obj: {big: true, back: true}
        },
        methods: {
            handleXi() {
                //this.style_str = 'background: red;font-size: 60px'
                this.style_list.pop()
            }, handleFont() {
                this.style_obj.fontSize = '30px'
            }, handleClick1() {
                // this.class_str = 'big'
                // this.class_list.pop()
                this.class_list.shift()
            }, handleClick2() {
                this.class_list.push('big')
            }, handleClick3() {
                this.class_obj.big = false

            }
        }

    })

</script>
</html>

条件渲染

v-if 
v-else-if
v-else

 

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">
    <h1>条件渲染</h1>

    <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>

</div>
</body>


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


</script>

 

列表渲染

列表渲染   v-for  显示多行

购物车案例+bootstrap

 

html

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</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-danger" @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>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {

            good_list: []

        },
        methods: {
            handleShow() {
                this.good_list = [
                    {id: 1, name: '钢笔', price: 9.9, count: 4},
                    {id: 2, name: '足球', price: 99, count: 4},
                    {id: 3, name: '篮球', price: 44, count: 32},
                    {id: 4, name: '电脑', price: 1299, count: 48},
                    {id: 5, name: '鼠标', price: 23, count: 4},
                    {id: 6, name: '脸盆', price: 8, count: 4},
                ]
            },
            handleDelete() {
                this.good_list.pop()
            }
        }


    })


</script>
</html>

 

v-for能循环的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1>循环数组--》见过了</h1>
                <p v-for="(value,index) in girls">第 {{index + 1}}个女神是：{{value}}</p>
                <h1>循环对象</h1>
                <p v-for="(value,key) in userinfo">key值是：{{key}}，value值是：{{value}}</p>
                <h1>循环字符串</h1>
                <p v-for="(value,index) in s">第 {{index}}个字母是：{{value}}</p>
                <h1>循环数字</h1>
                <p v-for="i in 10">{{i}}</p>

            </div>
        </div>
    </div>
</div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            girls: ['刘亦菲', '迪丽热巴', '高圆圆'],

            userinfo: {name: 'lqz', age: 19, hobby: '篮球'},
            s: 'hello world'
        },
        methods: {}
    })
</script>
</html>