Vue2，部分指令的认识（含小练习）

玛卡巴卡的造

已于 2022-02-10 17:31:44 修改

阅读量540

点赞数 2

分类专栏： Vue2 文章标签： vue.js javascript 前端

于 2022-02-08 19:56:40 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45188736/article/details/122830174

版权

Vue2 专栏收录该内容

18 篇文章

订阅专栏

一、Vue初体验

1.1 Vue安装

引入外网链接，可以去BootCDN获取

<script src="">

npm安装到本地

npm install vue@2.6.14

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

注意：在2022年Vue如果不加版本号默认下载最新3X的版本

1.2 第一个Vue程序

<body>
<span id="aaa" >{{msg}}</span>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
    el:'#aaa',
    data:{
        msg:'HelloWorld'
    }
})
</script>
</body>

1.3 指令

v-text 显示文本纯文本

<body>
<span id="aaa"  v-text="msg" ></span>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
    el:'#aaa',
    data:{
        msg:'HelloWorld'
    }
})
</script>
</body>

v-html 显示HTML标签富文本的渲染

<body>
<span id="aaa"  v-html="msg" ></span>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
    el:'#aaa',
    data:{
        msg:'<h1>HelloWorld<h1>'
    }
})
</script>
</body>

v-pre 标签里面原样输出

<body>
<span id="aaa"  v-pre>
    <h1>nihao </h1>
    <h2>haode</h2>
</span>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
    el:'#aaa',
})
</script>
</body>

v-model 双向绑定注意他只能去绑定输入框之类的标签

<body>
<input type="text" v-model="msg" id="aaa">
    
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const app=new Vue({
    el:'#aaa',
    data:{
        msg:'nihao'
    }
})
</script>
</body>

v-bind 绑定标签的属性缩写:

<body>
    <div id="aaa">
        <img v-bind:src="url" alt="" >
    </div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
    el:'#aaa',
    data:{
        url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F09%2F20161009145526_SkzwT.thumb.700_0.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646900303&t=119d71032855639dd5b53b6bd18ddf13'
    }
})
</script>
</body>

v-on 缩写@

<body>
    <div id="aaa">
<button @click="add">点击增加数字</button>
<span>{{msg}}</span>
</div>

<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const app=new Vue({
    el:'#aaa',
    data:{
        msg:1
    },
    methods: {
        add(){
            this.msg+=1
        }
    },
})
</script>
</body>

v-for 循环遍历

<body>
    <ul id="aaa">
        <li v-for="(item,index) in list">{{item}} {{index}}</li>
    </ul>
    
    <script src="../node_modules/vue/dist/vue.js"></script>
 <script>
const app=new Vue({
    el:'#aaa',
    data:{
        list:['小明','小红','小黄']
    }
})
 </script>
</body>

1.4 案例todolist

要求：一个输入框，一个添加按钮，写入事件会点击添加会增加一个todolist事项。
思路：使用v-model双向绑定不断更改一个数值，监听添加按钮，每次在数组中增加数值，v-for去遍历数组渲染列表
代码如下：

<body>
    <div id="list">
    <input type="text" v-model="msg">
    <button @click="add">添加</button>
    <ul >
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#list',
            data:{
                msg:'',
                list:[]
            },
            methods:{
                add(){
this.list.unshift(this.msg)
this.msg=''
                }
            }
        })
    </script>
</body>

1.5 案例做一个表单

要求：

homework

思路：和上方的那个小案例差不多的思路，不过我们要注意的是对象和数组的应用，以及一些小的CSS样式
代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {

            width: 100vw;
            height: 200px;
         
        }

        .list {
            width: 200px;
            height: 100px;
            border: 1px solid red;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
            float: left;
        }

        table {
   
            width: 50vw;
            border-collapse:collapse;
            float: left;
       
        }
        table td{
            /* border:1px solid black; */
            text-align: center;
        }
   
    </style>
</head>

<body>
    <div class="box">
        <div class="list">

            <input type="text" placeholder="输入编号" v-model="list.id">

            <input type="text" placeholder="输入名称" v-model="list.name">

            <button @click="add">添加数据</button>
        </div>

        <table cellspacing="0" border="2" >
            <tr style="background-color: green;color: #fff;">
                <th>编号</th>
                <th>品牌名称</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>

            <tr v-for="(item,index) in all">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.time}}</td>
     <td><button @click="remove(index)">删除</button></td>



        </table>



    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '.box',
            data: {
                list: {
                    id: '',
                    name: '',
                    time: ''
                },
                all: [],
          

            },
            methods: {
                add() {
                    let time = getTime();
                    this.list.time = time;
                    // 保存到所有数据中
                    this.all.push(this.list)

                    //清除单次数据
                    this.list = {
                        id: '',
                        name: '',
                        time: ''
                    }


                },
                // 删除操作
                remove(index) {
                    console.log(index);
                    this.all.splice(index,1)
                }


            }



        })




        //封装一个时间函数
     function getTime(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
return `${year}--${month}--${day} ${hour}:${minute}:${second}`
     }

    </script>

</body>

</html>

注意：

我们有一种现成的方法去获得当前的时间，不过只能获取年月日，方法如下：

let time=new Date().toLocalString()

关于table的一些问题
- 表格属性（这三个只能直接在table标签后使用）
  - border=“1”
  - cellspacing=“1” (单元格与单元格之间的空隙)
  - cellpadidng=“1” (内容与单元格的距离)

<table border="1" cellspacing="1" cellpadding="1"

3.如何去避免table中的border重叠变粗,设置table的css中的border-collapse:collapse;可以解决。

<style>
table{
border-collapse:collapse;
}
</style>

Vue2，部分指令的认识（含小练习）

一、Vue初体验

1.1 Vue安装

1.2 第一个Vue程序

1.3 指令

`v-text` 显示文本纯文本

`v-html` 显示HTML标签富文本的渲染

`v-pre` 标签里面原样输出

`v-model` 双向绑定注意他只能去绑定输入框之类的标签

`v-bind` 绑定标签的属性缩写`:`

`v-on` 缩写`@`

`v-for` 循环遍历

1.4 案例todolist

要求：一个输入框，一个添加按钮，写入事件会点击添加会增加一个todolist事项。

思路：使用v-model双向绑定不断更改一个数值，监听添加按钮，每次在数组中增加数值，v-for去遍历数组渲染列表

代码如下：

1.5 案例做一个表单

要求：

思路：和上方的那个小案例差不多的思路，不过我们要注意的是对象和数组的应用，以及一些小的CSS样式

代码如下

Vue2，部分指令的认识（含小练习）

一、Vue初体验

1.1 Vue安装

1.2 第一个Vue程序

1.3 指令

v-text 显示文本 纯文本

v-html 显示HTML标签 富文本的渲染

v-pre 标签里面原样输出

v-model 双向绑定 注意他只能去绑定输入框之类的标签

v-bind 绑定标签的属性 缩写:

v-on 缩写@

v-for 循环遍历

1.4 案例todolist

要求：一个输入框，一个添加按钮，写入事件会点击添加会增加一个todolist事项。

思路：使用v-model双向绑定不断更改一个数值，监听添加按钮，每次在数组中增加数值，v-for去遍历数组渲染列表

代码如下：

1.5 案例做一个表单

要求：

思路：和上方的那个小案例差不多的思路，不过我们要注意的是对象和数组的应用，以及一些小的CSS样式

代码如下

`v-text` 显示文本纯文本

`v-html` 显示HTML标签富文本的渲染

`v-pre` 标签里面原样输出

`v-model` 双向绑定注意他只能去绑定输入框之类的标签

`v-bind` 绑定标签的属性缩写`:`

`v-on` 缩写`@`

`v-for` 循环遍历