Vue框架2.0 基础知识(1）初始Vue Vue指令

放学后J

已于 2022-02-21 10:15:06 修改

阅读量1k

点赞数 2

文章标签： vue.js javascript 前端前端框架 vscode

于 2022-02-17 20:03:00 首次发布

本文链接：https://blog.csdn.net/weixin_46256704/article/details/122868996

版权

一、Vue初体验
1.1 Vue安装
. 引入外网链接，可以去BootCDN获取

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js">

. npm安装到本地

在Visual Studio Code终端输入：

 npm install vue@2.6.14

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

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

1.2 第一个Vue程序

<div id="app">{{msg}}</div>
<script>
    new Vue({
      el: "#app",
        data: {
          msg: "hello world!"
        }
    })    
</script>

1.3 指令

Vue内置的属性
v-text 显示文本纯文本 渲染数据

<div v-text="msg">
    
</div>

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

<div v-text="msg">
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "<h1>hello world！</h1>"
        }
    })
</script>

v-pre 标签里面原样输出


<body>
<span id="app"  v-pre>
    <h1>你好 </h1>
    <h2>世界！</h2>
</span>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
    el:'#app',
})
</script>
</body>

v-model 数据双向绑定

注意他只能去绑定输入框之类的标签暂且v-model只能使用input标签上

<div id="app">
      <!-- 数据双向绑定
                     暂且v-model只能使用input标签上
         -->
      <input type="text" v-model="msg" />
      <span>{{msg}}</span>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          msg: "hello world!",
        },
      });
    </script>

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>
    //v-for 指令  item 名字随便写 （不能123）
    <ul id="app">
        <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:'#app',
    data:{
        list:['小明','小红','小黄',1,3,5]
    }
})
 </script>
</body>

v-if 指令

  <div id="app">
      <p v-if="name==='bing'">给你一个冰墩墩</p>
      <P v-else-if="isShow==='mei'">没有了没有了</P>
      <p v-else="dao">没抢到!</p>   
    </div>
    <script src="../vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          isShow: false,
          name: "dao",
        },
      });

v-show指令

 <div id="app">
      <p v-show="isShow">放学后 写文章是不是最好的！</p>
    </div>
    <script src="../vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          //false 不显示 true 显示
          isShow: false,
        },
      });
    </script>

v-if和v-show指令的区别?

v-if 操作的DOM元素，v-show操作的是css样式

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 案例做一个表单
要求：

思路：和上方的那个小案例差不多的思路，不过我们要注意的是对象和数组的应用，以及一些小的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>

注意：

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

let time=new Date().toLocalString()

2.关于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>

总结：

官方地址: 介绍 — Vue.js

Vue是一个渐进式 JavaScript 框架。Vue只关系视图层，如果你需要有其他的业务，vue-Router 、Vuex等等。

放学后J

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue框架2.0 基础知识(1）初始Vue Vue指令

什么是 vue？vue能干什么？构建用户界面用 vue 往 html 页面中填充数据，框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
复制链接

扫一扫

Vue框架2.0 基础知识(1）初始Vue Vue指令

一、Vue初体验 1.1 Vue安装 . 引入 外网链接，可以去BootCDN获取

. npm安装到本地

总结：

一、Vue初体验
1.1 Vue安装
. 引入外网链接，可以去BootCDN获取