vue框架2

插值语法

mvvm演示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div id="app">

   姓名：{{name}}

  <br>

  <input type="text" v-model="name">

</div>

</body>

<script>

  var vm = new Vue({

    el: '#app',

    data: {

      name: 'hanser',

      age:22

    }

  })

</script>

</html>

插值语法

# 插值语法中可以放的有：

  - 变量，对象取值，数组取值

  - 简单的js语法

  - 函数()

# 插值只能写在标签内部，不能写在标签属性上

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div id="app">

    <p>姓名:{{name}}</p>

    <p>年龄:{{age}}</p>

    <p>爱好:{{hobby[1]}}</p>

    <p>妻子:{{wife}}</p>

    <p>妻子年龄:{{wife.age}}</p>

    <!--<p>运算:{{20+2*4}}</p>-->

    <p>三目运算符:{{20>21?'大于':'小于'}}</p>

    <p>标签:{{a_url}}</p>

</div>

</body>

<script>

  var vm = new Vue({

    el: '#app',

    data: {

        name: 'hanser',

        age:22,

        hobby:['唱跳','rap','篮球'],

        wife:{name:'刘亦菲',age:38},

        a_url:'<a href={"http://www.baidu.com"}>百度</a>',

        // 三目运算符

    }

  })

</script>

</html>

文本指令

# 指令系统：vue提供的

   -v-xx           写在标签上，任意标签

   -v-xx=""        插值语法中可以写的，它都能写

# 例：a_url必须是data中定义的变量

       <p v-text="a_url"></p>

# v-text      <!--直接把字符串内容渲染在标签内部，等同于-->

       <p v-text="a_url"></p>

# v-html      <!--把字符串的内容渲染成标签，写在标签内部-->

       <p v-html="a_url"></p>

# v-show      <!--控制样式显示与否，等于布尔值，代表该元素是否显示-->

       <p v-show></p>

# v-show_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">

    <p v-text="a_url"></p>

    <p v-html="a_url"></p>

    <p v-show></p>   <!--控制样式显示与否，等于布尔值，代表该元素是否显示-->

    <img src="https://img2.woyaogexing.com/2023/02/10/f426aeefcf78b0f6e88bba4e67437409.jpeg" alt=""

         v-show="show" width="200px" height="200px">

    <p>v-if</p>

    <img src="https://img2.woyaogexing.com/2023/02/10/f426aeefcf78b0f6e88bba4e67437409.jpeg" alt=""

         v-show_if="show" width="200px" height="200px">

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

属性指令

# 标签上的属性可以绑定变量，属性值会随着变量变化

  例如：有src，href，class等

# 语法：

   v-bind:属性名="变量名"

# 简写：

   :属性名="变量名"

事件指令

# 事件指令

   - 点击事件(使用最多的)

   - 双击事件

   - 滑动事件

# 点击事件

   1. v-on:事件名='函数'--->简写--->@事件名='函数'

        <button v-on:click="handleClick"></button>

   2. 函数必须写在methods的配置项中

        methods:{

            'handleClick':function (){

                console.log(this)

                this.show=!this.show

        }}

   3. 上面的this是当前vue的实例

   4. 点击button就会触发绑定函数(handleClick)的执行

# 代码示例：写一个点击按钮，随机切换，美女图片

<!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://pic1.zhimg.com/v2-cd7bc16e977b162d9092899ad106db73_r.jpg',

        url_list:['https://n.sinaimg.cn/sinakd20201010s/292/w640h1252/20201010/ccf8-kakmcxc4806009.jpg',

            'https://n.sinaimg.cn/sinacn20118/214/w2048h1366/20190111/3f99-hrpcmqv4220798.jpg',

            'https://pic4.zhimg.com/v2-0b676d3c16993f59466eca32858b4454_r.jpg',

            'https://t1.huanqiucdn.cn/7ef5e4ba546f17923ff99f22a46ad0b2.jpg',

            'https://pic2.zhimg.com/v2-cfabe13dfca655355e93068d3ce2fcbe_r.jpg'

        ],

    },

    methods:{

        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)

            }

    }

  })

</script>

</html>

class和style

# 两者都是属性指令，应用广泛

# class：推荐用数组

    :class='变量'       

# style：推荐用对象

    :style='变量'

变量可以是字符串，数组，对象

# 数组的方发...移除pop(自行百度)

# 代码示例：

<!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>class</h1>

    <!--    <div :class="class_str">div</div>-->

    <!--    <div :class="class_list">div</div>-->

    <div :class="class_obj">div</div>

    <h2>style</h2>

    <!--    <div :style="style_str">style</div>-->

    <!--    <div :style="style_list">style</div>-->

    <div :style="style_obj">style</div>

</div>

</body>

<script>

  var vm = new Vue({

    el: '#app',

    data: {

        // class_str:'font red font-color',

        // class_list:['font'],   // 推荐

        class_obj: {font: true, green: 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'}

    },

  })

条件渲染

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

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

列表渲染

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/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">

                    <h1>v-if+v-for 显示购物车</h1>

                    <button @click="handleClick">点击显示商品</button>

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

</div>

</body>

<script>

  var vm = new Vue({

    el: '#app',

    data: {

        show:false,

        good_list: [

            {id:1,name:'宝马',price:'450000'},

            {id:2,name:'赛马',price:'1000000'},

            {id:3,name:'小马',price:'120000'},

            {id:4,name:'老马啊，老马',price:'4500'},

        ]

    },

      methods:{

        handleClick() {

            this.show=!this.show

        },

      }

  })

</script>

</html>

巴特西

vue框架2

插值语法

mvvm演示

插值语法

文本指令

属性指令

事件指令

class和style

条件渲染

列表渲染

最新文章

热门文章