Vue-2

（一）vue简介

　　　　Vue是一套用于构建用户界面的前端框架

构建用户界面

- 用vue往html页面中填充数据非常方便

框架

- 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能
- 要学习vue，就是在学习vue框架中规定的用法
- vue的指令、组件（是对UI结构的复用）、路由、Vuex

特性

- 数据驱动视图：数据的变化会驱动视图的更新，单向的数据绑定

　　　　　　在使用了Vue的界面，vue会监听数据的变化，从而自动重新渲染页面的结构

- 双向数据绑定

　　　　　　在网页中，form表单负责采集数据，ajax负责提交数据

　　　　　　js数据的变化会被自动渲染到页面上，页面上表单采集的数据发生变化的时候，会被Vue自动获取。并更新到js数据中

MVVM

- MVVM是Vue实现数据驱动视图和双向数据绑定的核心原理，MVVM指的是Model、View和ViewModel
  - Model：表示当前页面渲染时所依赖的数据源
  - View：表示当前页面所渲染的DOM结构
  - ViewModel：表示Vue的实例，它是MVVM的核心，是它把数据源和页面的结构连接在一起

（二）Vue的基本使用

基本使用步骤

导入vue.js的script脚本文件
在页面中声明一个将要被vue所控制的DOM区域
创建vm实例对象

Vue的指令与过滤器：在vue提供的模板渲染中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算
- 指令是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本语法
- 内容渲染指令：用来辅助开发者渲染DOM元素的文本内容
  - v-text：会覆盖元素内部的所有内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 把username对应的值，渲染到第一个p标签中 -->
        <div class="app">
            <p  v-text="username"></p>
            <p v-text="gender">性别</p>
        </div>
        <!-- 把gender对应的值，渲染到第二个p标签中 -->
        <!-- 注意：第二个p标签中，默认的文本“性别”会被gender的值覆盖掉 -->
        <script src="./js/v2.6.10/vue.js"></script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    username: 'baekhyun',
                    gender: 'man'
                }
            })
        </script>
    </body>
</html>

- - {{}}：插值表达式：Mustache，在实际开发中用的最多，知识内容的占位符，不会覆盖原有的内容，不能用在属性节点，只能用在内容节点中
    - 在vue提供的模板渲染语法，除了支持绑定简单的数值之外，还支持javascript表达式的运算

<p>姓名:{{username}}</p>
<p>性别:{{gender}}</p>
<p>{{number+1}}</p>
<p>{{ok?'YES':'NO'}}</p>
const vm = new Vue({
    el: '.app',
    data: {
        username: 'BH',
        gender: 'man',
        number: 1,
        ok: true
    }
})

- - v-html：可以把带有标签的字符串渲染成真正的html内容

<p v-html="info">哈哈哈</p>
<script>
            const vm = new Vue({
                el: '.app',
                data: {
                    username: 'baekhyun',
                    gender: 'man',
                    info: '<h4 style="color: pink">今天是个好日子</h4>'
                }
            })
</script>

- 属性绑定指令：如果要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令
  - 在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="app">
            <p>count的值是:{{count}}</p>
            <!-- 在绑定事件的时候可以通过小括号传参 -->
            <!-- v-on:指令可以简写为@ -->
            <!-- vue提供了内置变量$event，它就是原生dom的事件对象 -->
            <button v-on:click="'add'+index">+1</button>
        </div>
        <script src="./js/v2.6.10/vue.js"></script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    count: 0,
　　　　　　　　　　　　index: 1　　　　　　　　　　　　
                },
                //定义事件处理函数
                methods:{
                    add(e){
                        console.log(e.target);
                        vm.count+=1;
                    }
                }
            })
        </script>
    </body>
</html>

- 事件绑定指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="app">
            <!-- 如果count是偶数，则按钮背景变为粉红色，反之去掉背景颜色 -->
            <p>count的值是:{{count}}</p>
            <!-- 在绑定事件的时候可以通过小括号传参 -->
            <!-- v-on:指令可以简写为@ -->
            <!-- vue提供了内置变量$event，它就是原生dom的事件对象 -->
            <button @click="add($event,1)">+1</button>
            <button v-on:click="sub">-1</button>
        </div>
        <script src="./js/v2.6.10/vue.js"></script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    count: 0
                },
                //定义事件处理函数
                methods:{
                    add(e,n){
                        // vm.count+=1;
                        // console.log(this === vm);//true
                        this.count+=n;
                        if(this.count%2 == 0){
                            e.target.style.backgroundColor = 'pink';
                        }else{
                            e.target.style.backgroundColor = '';
                        }
                    },
                    sub(e){
                        // vm.count-=1;
                        this.count-=1;
                    }
                }
            })
        </script>
    </body>
</html>

- 事件修饰符

事件修饰符	说明
.prevent	阻止默认行为
.stop	阻止事件冒泡
.capture	以获取模式触发当前的时间处理函数
.once	绑定的事件只触发一次
.self	只有在event.target是当前元素自身触发事件处理函数

- 按键修饰符

<　　　　div class="app">
             <!-- 只有在'key'是ENTER时调用vm.submit() -->
             <input @keyup.enter = 'submit' @keyup.esc = 'clearInput'/>
             <!-- 只有在'key'是'Esc'时调用vm.clearInput() -->
        </div>
        <script src="./js/v2.6.10/vue.js"></script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    count: 0
                },
                //定义事件处理函数
                methods:{
                    submit(e){
                        console.log("成功提交了")
                    },
                    clearInput(e){
                        e.target.value = '';
                    }
                }
            })
        </script>

- 双向绑定指令：vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的情况下，快速获取表单的数据（只有表单元素才能使用双向绑定指令）
  - input输入框
    - type='radio'
    - type='checkbox'
    - type='xxx'
  - textarea
  - select

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="app">
             <p>用户的名字是：{{username}}</p>
             <input type="text" v-model="username" />
             <hr>
             <input type="text" :value="username"/>
             <hr >
             <select v-model="city">
                 <option value="">请选择心仪城市</option>
                 <option value ="1">成都</option>
                 <option value ="2">北京</option>
                 <option value ="3">广州</option>
             </select>
             <hr>
             <input v-model.number="n1" />+<input v-model.number="n2">=<span>{{n1+n2}}</span>
        </div>
        <script src="./js/v2.6.10/vue.js"></script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    username: 'zhangsan',
                    city:'',
                    n1: 1,
                    n2: 2
                }
            })
        </script>
    </body>
</html>

- 双向绑定修饰符

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型	<input v-model.number='n1'>
.trim	自动过滤用户输入的首尾空白字符	<input v-model.trim='n1'>
.lazy	在change时而非input时更新	<input v-model.lazy='n1'>

- 条件渲染指令：用来辅助开发者按需控制DOM的显示和隐藏（如果需要频繁的切换元素的显示状态，使用v-show性能更好）
  - v-if：原理是动态创建或移除元素，实现元素的显示和隐藏（初始状态是false，一般不需要显示，使用v-if性能更好）

- - v-show ：原理是动态给元素添加或移除display:none样式，来实现元素的显示和隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="app">
            <input v-model.lazy="type" />
             <p v-if="type==='A'">优秀</p>
             <!-- v-else-if必须和v-if一起使用，否则它将不会被识别 -->
             <p v-else-if="type==='B'">良好</p>
             <p v-else-if="type==='C'">一般</p>
             <p v-else="type==='D'">差</p>
        </div>
        <script src="./js/v2.6.10/vue.js"></script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    type: 'A'
                }
            })
        </script>
    </body>
</html>

- 列表渲染指令：vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构，v-for指令要使用item in items形式的特殊语法
  - item可以添加第二个参数，索引index，使用()包裹

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="app">
            <ul>
                <li v-for="item in list">姓名为：{{item.name}}</li>
            </ul>
        </div>
        <script src="./js/v2.6.10/vue.js"></script>
        <script>
            const vm = new Vue({
                el: '.app',
                data: {
                    type: 'A',
                    list:[
                        {name: 'a'},
                        {name: 'b'},
                        {name: 'c'},
                    ]
                }
            })
        </script>
    </body>
</html>

- 案例
  - CSS

　　　　　　　.head {
                margin-bottom: 10px;
                border: 2px solid darkgray;
                overflow: hidden;
            }
            
            #brand {
                height: 50px;
                padding-left: 10px;
                background-color: #CCC;
                line-height: 50px;
                border-bottom: 2px solid darkgray;
            }
            
            span{
                float: left;
                display: inline-block;
                margin: 10px 0px 10px 10px;
                height: 20px;
                padding: 5px;
                background-color: #A9A9A9;
                font-size: 12px;
                line-height: 20px;
                text-align: center;
            }
            
            input {
                margin: 10px 0px 10px 0px;
                height: 24px;
                font-size: 12px;
            }
            
            .btn {
                height: 30px;
            }
            
            table {
                border-collapse: collapse;
                width: 100%;
            }
            
            td,
            th {
                padding-left: 10px;
                height: 30px;
            }
            
            a {
                text-decoration: none;
                color: royalblue;
            }

- - html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/案例.css">
    </head>
    <body>
        <div class="app">
            <div class="head">
                <div id="brand">
                    添加品牌
                </div>
                <span>品牌名称</span>
                <input type="text" v-model="brand" placeholder="请输入品牌名称"/>
                <input class="btn" type="button" value="添加品牌" v-on:click="add"/>
            </div>
            <table border="1" cellspacing="0" >
                <thead>
                    <tr>
                        <td>#</td>
                        <td>品牌名称</td>
                        <td>状态</td>
                        <td>创建时间</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.brand}}</td>
                        <td><label :for="'open'+item.id">{{item.status?'已启用':'已禁用'}}</label> <input :id="'open'+item.id" type="checkbox" v-model="item.status"/></td>
                        <td>{{item.time}}</td>
                        <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script src="js/v2.6.10/vue.js"></script>
        <script>
            const date = new Date();
            const vm = new Vue({
                el: '.app',
                data: {
                    brand: '',
                    nextId: 4,
                    list:[{
                        id: 1,
                        brand: '宝马',
                        status: true,
                        time: date,
                    },
                    {
                        id: 2,
                        brand: '奥迪',
                        status: false,
                        time: date,
                    },
                    {
                        id: 3,
                        brand: '奔驰',
                        status: false,
                        time: date,
                    }]
                },
                methods:{
                    add(e){
                        if(this.brand.trim() === ''){
                            return;
                        }
                        const date = new Date();
                        //将要添加的对象，整理出来
                        const obj = {
                            id: this.nextId,
                            brand: this.brand,
                            status: true,
                            time: date,
                        }
                        //向list数组末尾添加对象push
                        this.list.push(obj);
                        //使nextId自增加一，并且清空this.brand
                        this.nextId++;
                        this.brand = '';
                    },
                    del(id){
                        this.list = this.list.filter(item=>item.id !== id)
                    }
                }
            })
        
        </script>
    </body>
</html>

posted @ 2022-04-30 10:02 Miraitowa56 阅读(47) 评论(0) 收藏举报

刷新页面返回顶部

Miraitowa56

Vue-2

公告