模版语法、列表渲染、文本指令、事件指令、属性指令、vue中的style和class、条件渲染、v-for能循环的

vue 基础

1 模版语法

2 文本指令

2.1 模版语法 v-text
2.2 文本指令 v-html
2.3 文本指令 v-show
2.4 文本指令 v-if
2.5 v-show把图片的显示隐藏

3 事件指令

ES6对象语法演变
3.1 v-on 不传参/a>
3.2 v-on 传参和 v-on:简写成@

4 属性指令

4.1 属性指令之 v-bind: 简写成 :
4.2 用属性指令切换图片
4.3 属性指令之 class 属性

5 style和class

5.1 style 字符串类型
5.2 style 数组类型
5.3 style 对象类型
5.4 class是字符串类型
5.5 class是数组类型
5.6 class是对象类型

6 条件渲染

7列表渲染

7.2 v-for能循环的

1 模版语法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <script src="./js/vue.js">script>

head>
<body>
<div id="app">
    <h1>模板语法h1>
    
    <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):{{10>9 ? true:false}}p>
    <p>三目运算符(对象的长度大于2吗):{{list1.length > 2 ? '大于2': '不大于2'}}p>

    <p>简单表达式(99 + 1=):{{ 99 + 1 }}p>

    

div>
body>
html>

<script>

    new Vue({
        el: '#app',
        data: {
            name: 'lin',
            age: 18,
            list1: [1, 2, 3, 4],  // 数组
            obj1: {name: 'today', age: 20},  // 对象
            link1: '百度一下',
        }

    })


    // 定义变量
    let list1 = [1, 2, 3, 4]
    let res = list1.length < 2 ? '大于2': '不大于2'
    console.log(res)

script>

2 文本指令

# vue 的指令系统 ,放在标签,以v-开头的,每个指令都有特殊用途
v-text:把字符串内容渲染到标签内部
v-html:把字符串内容渲染到标签内部,但如果是标签字符串,会渲染成标签
v-show:控制标签显示与否:通过style的display是否等于none控制,在html中还存在
v-if:控制标签显示与否:通过dom操作做的,这个标签从dom中删除了

2.1 文本指令 v-text

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
head>
<body>
<div id="app">
    <h1>文本指令 v-text v-htmlh1>
    <h2>文本指令之 v-text,把字符串内容渲染到标签内部h2>
    
    <p>{{name}}p>

    
    <p v-text="name">p>
    <p v-text="link1">p>
 
div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: 'lin',
            link1: '百度一下',
            isShow: true,
            ifShow: true,
        }
    });
script>

2.2 文本指令 v-html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
head>
<body>
<div id="app">
    <h1>文本指令 v-htmlh1>
    <h2>文本指令之 v-html,把字符串内容渲染到标签内部,但如果是标签字符串,会渲染成标签 h2>
    <h3>把标签字符串渲染成标签使用h3>
    <p v-html="link1">p>
div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: 'lin',
            link1: '百度一下',
        }
    });
script>

2.3 文本指令 v-show

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
head>
<body>
<div id="app">
    <h1>文本指令 v-showh1>
    <h2>v-show 控制的是标签 显示与否:通过style的display是否等于none控制,在html中还存在h2>
    <div>
        <p v-show="isShow">我是p标签p>
    div>
div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            isShow: true,
            ifShow: true,
        }
    });
script>

2.4 文本指令 v-if

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <script src="./js/vue.js">script>

head>
<body>
<div id="app">
    <h2>v-if 控制的是标签 显示与否:通过dom操作,这个标签从dom中删除了h2>
    <div>
        <span v-if="ifShow">我是span标签span>
    div>
div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            ifShow: true,
        }
    });
script>

2.5 v-show把图片的显示隐藏

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
head>
<body>
<div id="app">
    <h1>文本指令 v-showh1>
    <h2>用v-show 展示图片或隐蔽h1>
    <div>
        <button @click="handleShow">点我看风景button>
        <br>
        <img src="./img/1.webp" alt="" width="300" height="300" v-show="showPhoto">
    div>
div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            showPhoto: false
        },
        methods: {
            handleShow(){
                this.showPhoto = !this.showPhoto
            }
        }
    });

script>

3 事件指令

# 用v-on绑定事件后,只要触发事件,就会执行函数
	v-on:点击事件,双击事件,滑动事件 ='函数'
        
# 用的最多的就是click事件 ,单击事件


# v-on:click=‘函数’---》放在标签上,点击标签,就会触发函数执行---》函数必须写在methods中,可以用es6语法的简写
  methods: {
       // handleClick: function () {
       //     alert('美女')
       // },
       
       handleClick() {  // es6 语法
           alert('美女')
       },
   }



# v-on: 可以使用 @ 替换

ES6对象语法演变

// ES6 对象写法

    var userinfo = {"username": "lin", "password": "123"}
    // 可写成下面这种:
    var userinfo = {username: "lin", password: "123"}

    var username = "lin"
    var password = "123"
    // var userinfo = {username: username, password:password}
    // 可写成下面这种:
    // 放个变量到对象中,会把变量名作为key,值作为value
    var userinfo = {username, password}

    console.log(userinfo['username'])
    console.log(userinfo.username)

    var userinfo = {
        username: "lin",
        password: "123",
        printName: function () {
            console.log(this.username)
        }
    }
    // 调用函数
    userinfo.printName()

    // 演变
    var printName = function () {
            console.log(this.username)
    }

    var userinfo = {
        username: "lin",
        password: "123",
        printName() {
             console.log(this.username)
        }
    }

3.1 v-on 不传参

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
head>
<body>
<div id="app">
    <h1>事件指令h1>
    <button v-on:click="handleClick">点我,看风景button>
div>
body>
html>

<script>
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleClick(){
                alert('hello')
            }
        }
    });
script>

3.2 v-on 传参和 v-on:简写成@

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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">点我,传参数, 如果不传,默认第一个参数是:点击事件对象:PointerEventbutton>

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

    <hr>

    <h1>把 v-on: 简写  @ h1>
    <button @click="handleClick">点我,看风景button>
div>
body>
html>

<script>
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
           
        }
    });
script>

4 属性指令

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

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

4.1 属性指令之 v-bind: 简写成 :

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
head>
<body>
<div id="app">
    <h1>属性指令h1>
    <div>
        <button @click="handleClick">点我,有风景button><br>
        <button @click="handleClick1">点我,变大风景button><br>

        <p>属性简写,就是把 v-bind: 简写成 : p>
        <img :src="img_url" :width="width" :height="height">
    div>
div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            img_url: '',
            width: 300,
            height: 300,
        },
        methods: {
            handleClick(){
                this.img_url = './img/2.webp'
            },
            handleClick1(){
                this.width = '500px';
                this.height = '500px';
            }
        }
    });
script>

4.2 用属性指令切换图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
head>
<body>
<div id="app">
    <h1>属性指令h1>
    <div>
        <button @click="handleClick">点我,有风景button><br>
        <button @click="handleClick1">点我,变大风景button><br>

        <p>属性简写,就是把 v-bind: 简写成 : p>
        <img :src="img_url" :width="width" :height="height">
    div>

    <hr>

    <h1>点击按钮,切换图片h1>
    <button @click="handleChange">点我换风景button><br>
    <img :src="img_url2" width="400px" height="400px">


div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            img_url: '',
            width: 300,
            height: 300,

            img_url2: './img/2.webp',
            img_list: ['./img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg', './img/6.jpg', './img/5.webp', './img/6.webp']
        },
        methods: {
            handleClick(){
                this.img_url = './img/2.webp'
            },
            handleClick1(){
                this.width = '500px';
                this.height = '500px';
            },
            handleChange(){
                this.img_url2 = this.img_list[Math.floor(Math.random() *  this.img_list.length)]
            }

        }

    });

script>

4.3 属性指令之 class 属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
    <style>
        .red {
            color: rgba(255, 104, 104, 0.7);
        }
        .purple {
            color: rgba(104, 104, 255, 0.7);
        }
    style>
head>
<body>
<div id="app">
    <h2>class属性h2>
    <button @click="handleChangeClass">点我变样式button>
    <div :class="isActive ? 'red': 'purple'">
        <h1>我是一个divh1>
    div>
div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            isActive: false
        },
        methods: {
            handleChangeClass(){
                this.isActive = !this.isActive
            },
        }
    });
script>

5 style和class

5.1 style是字符串类型

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
head>
<body>
<div id="app">
    <h1>style和class:能够绑定什么类型的变量:字符串,数组,对象h1>

    <div :style="style_str">
        <button @click="handleSmall">点击变细button>
        <p>我是div中的p标签p>
    div>
div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // style是字符串类型
            style_str: 'background: red; font-size: 60px; font-weight: bold',
        },
        methods: {
            handleSmall(){
                this.style_str = 'background: red; font-size: 60px;'
            }
        }
    });
script>

5.2 style是数组类型

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
head>
<body>
<div id="app">
    <h1>style和class:能够绑定什么类型的变量:字符串,数组,对象h1>

    <div :style="style_list">
        <button @click="handleSmall">点击变细button>
        <p>我是div中的p标签p>
    div>

div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // style是数组类型
            style_list: [{background: 'red'},{'font-size': '60px'},{'font-weight': 'bold'}]
        },
        methods: {
            handleSmall(){
                this.style_list.pop()
            }
        }

    });

script>

5.3 style是对象类型(推荐使用)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
head>
<body>
<div id="app">
    <h1>style和class:能够绑定什么类型的变量:字符串,数组,对象h1>
    <div :style="style_obj">
        <button @click="handleSmall">点击变细button>
        <button @click="handleFontSmall">点击字体变小button>
        <p>我是div中的p标签p>
    div>
div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // style:是对象类型(建议用对象,对象好控制)
            style_obj:{background: 'red', fontSize: '60px', fontWeight: 'bold'},
        },
        methods: {
            handleFontSmall(){
                this.style_obj.fontSize = '30px'
            }
        }
    });
script>

5.4 class是字符串类型

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
    <style>
        .big{
            font-size: 60px;
        }
        .back{
            background-color: greenyellow;
        }
    style>
head>
<body>
<div id="app">
    <h1>style和class:能够绑定什么类型的变量:字符串,数组,对象h1>
    <h2>class绑定字符串、数组、对象h2>
    <div :class="class_str">
        <button @click="handleRemoveBackgroud">点击去掉背景button>
        <p>我是div中的p标签p>
    div>
div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // class是字符串类型
            class_str: 'big back'
        },
        methods: {
            handleRemoveBackgroud(){
                this.class_str='big'
            }
        }
    });
script>

5.5 class是数组类型(推荐使用)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
    <style>
        .big{
            font-size: 60px;
        }
        .back{
            background-color: greenyellow;
        }
    style>
head>
<body>
<div id="app">
    <h1>style和class:能够绑定什么类型的变量:字符串,数组,对象h1>
    <h2>class绑定字符串、数组、对象h2>
    <div :class="class_list">
        <button @click="handleRemoveBackgroud">点击去掉背景button>
        <button @click="handleBigFont">点击字体变大button>-->
        <p>我是div中的p标签p>
    div>
div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // class是数组类型
            class_list: ['big', 'back'],
        },
        methods: {
            handleRemoveBackgroud(){
                this.class_list.pop()
            },
            handleBigFont(){
                this.class_list.push('big')
            },
        }
    });
script>

5.6 class是对象类型

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
    <style>
        .big{
            font-size: 60px;
        }
        .back{
            background-color: greenyellow;
        }
    style>
head>
<body>
<div id="app">
    <h1>style和class:能够绑定什么类型的变量:字符串,数组,对象h1>
    <h2>class绑定字符串、数组、对象h2>
    <div :class="class_obj">
        <button @click="handleSmallFont">点击字体变小button>
        <p>我是div中的p标签p>
    div>

div>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            // class是对象类型
            class_obj:{big: true, back: true}
        },
        methods: {
            handleSmallFont(){
                this.class_obj.big = false
            }
        }

    });

script>

6 条件渲染

条件关键字:
	v-if 
	v-else-if
	v-else

代码案例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>
body>
html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            score: 82
        },

    });

script>

7 列表渲染

# 列表渲染   v-for  显示多行

# 购物车案例+bootstrap


列表渲染案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

7.2 v-for能循环的

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

作业

# 把今天讲的所有内容,都敲一遍
-------

# 获取所有图书接口,vue+bootstrap+jquery的ajax,显示在前端
	-跨域问题
    
    
# 把uniapp,开发工具hbuilder下载,点击切换美女图片---》打包成安装apk---》安装到自己手机上

你可能感兴趣的:(vue,前端,vue.js,前端,javascript)