vue笔记day1

瑞OuO

已于 2022-03-18 09:21:22 修改

阅读量863

点赞数 1

文章标签： vue.js javascript 前端

于 2022-03-18 09:07:17 首次发布

本文链接：https://blog.csdn.net/m0_61246613/article/details/123384226

版权

什么是vue
1.构建用户界面
用vue往html页面中填充数据，非常的方便。
2.框架
(1).框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能!
(2).要学习vue，就是在学习vue框架中规定的用法!
(3).vue 的指令、组件(是对UI结构的复用)、路由、Vuex、vue 组件库。

(4).只有把上面的内容掌握以后，才有开发vue项目的能力!

vue的两个特性
1.数据驱动视图:
(1)数据的变化会驱动视图自动更新
(2)好处:程序员只管把数据维护好，那么页面结构会被vue自动渲染出来!
2.双向数据绑定:
在网页中,form表单负责采集数据，Ajax负责提交数据。
(1)js 数据的变化，会被自动渲染到页面上
(2)页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中

一些简单的实例：

<!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>vue</title>
    <!-- 导入vue的库文件，在window全局就有了vue这个构造函数 -->
    <script src="vue.js"></script>
    <link rel="stylesheet" href="./bootstracp/css/bootstrap.css">
</head>

<body>
    <div id="app">
        <!-- <p>{{msg}}</p> 插值表达式Mustache 不能用在属性值中-->
        <p v-text="msg"></p>
        <p v-text="gender">性别</p>
        <!-- v-text指令会覆盖元素内部原有的内容 -->
        <p>性别：{{ gender }}</p>
        <p v-html="info"></p>
        <input type="text" :placeholder="tips">
        <!-- v-bind用来操作属性简写为‘：’ 绑定的内容需要进行动态拼接，则字符串的外面应该加单引号
        例如：<div :title="'box'+idnex">这是一个div</div>-->
        <div>{{ tips.split("").reverse().join("") }}</div>
        <!-- 插值运算符中可以运算和操作 -->
        <h3>count的值为：{{count}}</h3>
        <!-- 语法格式为v-on:事件名称=“事件处理函数的名称” -->
        <button v-on:click="add($event)">+1</button>
        <!-- v-on:可以简写为@ .prevent阻止事件，.stop阻止事件冒泡-->
        <a href="https://www.bilibili.com/video/BV1zq4y1p7ga?p=50&spm_id_from=pageDriver" @click.prevent>跳转</a>
        <!--表单元素才能使用v-model，input,textarea,select... 
            v-model是双向绑定（v-model能修改data里的数据），v-bind是单向绑定 -->
        <!-- v-model.number自动将用户的输入值转为数值类型
             v-model.trim 自动过滤用户输入的首尾空白字符
             v-model.lazy 在"change""时而非"input"时更新 -->
        <!-- v-show隐藏元素原理是用display:none,v-if是动态删除或创建元素。 -->
        <input type="text" @keyup.esc="clearInput">
        <!-- 按键修饰符 -->
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>索引</th>
                <th>id</th>
                <th>年龄</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="item.id">
                    <!-- 用到v-for就要绑定一个：key属性 -->
                    <td>{{index}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </tbody>
        </table>
        <p>
            <!-- 过滤器   管道符 “|” -->
            message的值是：{{msg | cap}}
        </p>
    </div>
    <div id="app2">
        <p>
            message的值是：{{msg | cap}}
        </p>
    </div>


    <script>
        Vue.config.devtools = true;
        const vm2 = new Vue({
            el: "#app2",
            data: {
                msg: 'hello vue.js'
            }
        })
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实力要控制页面上的哪个区域，接受的值是一个选择器
            el: "#app",
            // data对象就是要渲染到页面上的数据
            data: {
                msg: 'hello vue.js',
                gender: 'male',
                info: '<h4 style="color: red;">学习vue</h4>',
                tips: '请输入用户名',
                count: 1,
                list: [
                    { id: "张三", age: 18 },
                    { id: "张三1", age: 18 },
                    { id: "张三2", age: 18 }
                ]
            },
            //methods的作用，就是定义事件的处理函数
            methods: {
                add(e) {
                    this.count += 1;
                    if (this.count % 2 === 0) {
                        e.target.style.backgroundColor = ""
                    } else {
                        e.target.style.backgroundColor = "red"
                    }
                },
                clearInput(e) {
                    // console.log("触发");
                    e.target.value = ""
                }
            },
            filters: {
                // 过滤器中形参中的val永远都是“|”管道符前面的值。 
                // 私有过滤器
                cap(val) {
                    // console.log("asdasd");
                    const first = val.charAt(0).toUpperCase()
                    const other = val.slice(1)
                    return first + other
                }
            }
        })
        Vue.filter("cap", function () {
            const first = val.charAt(0).toUpperCase()
            const other = val.slice(1)
            return first + other
        })
    </script>

</body>

</html>