Vue入门01

程序员文章站 2022-03-07 17:18:48

...

Hello Vue！！

每一个应用都是从创建一个实例开始的

声明式渲染声明一条数据，然后利用特殊的模板语法将其渲染出来

new Vue({})—> 创建一个实例

el:""----> 声明挂载点

{{msg}} —>模板语言

<div id="app">{{msg}}</div>

<!-- 引入vue.js -->
<script src="/base/vue.js"></script>
<script>
    //每一个应用都是从创建一个实例开始的
    //每一个应用起码得来这么一个实例
    //声明式渲染  声明一条数据，然后利用特殊的模板语法将其渲染出来
    new Vue({
        el:"#app", // 挂载点
        data:{
            msg:"hello Vue.js!"
        }

    })
</script>

Vue遵从MVC设计模式

Vue入门01

m：model v:view c:contoroller

m层：数据层
v层：视图层
c层：就是将model层的数据在view层显示

例题

点击按钮显示隐藏div
【注】箭头函数中无this指向

<script>
    /* 
        mvc设计模式：
            m：model v:view  c:contoroller
            c的作用：就是将m层的数据在view层显示
            
    */
    //m层
    let data = {
        isShow : true,
        isBig:false
    }
    //v层
    let boxDom = document.getElementsByClassName("box")[0];
    //C层
    function Contoroller(){
        this.init();
    }
    Contoroller.prototype = {
        init(){
            this.addEvent()
        },
        addEvent(){
            let btnDom = document.getElementsByClassName("btn")[0];
            let btn2Dom = document.getElementsByClassName("btn2")[0];
            // let that = this;
            btnDom.onclick = ()=>{
                data.isShow = !data.isShow
                //渲染视图
                this.render()
            }
            btn2Dom.onclick = ()=>{
                data.isBig = !data.isBig
                this.render()
            }
        },
        render(){
            boxDom.style.display = data.isShow ? "block" : "none"
            boxDom.style.width = data.isShow ? "400px" : "100px"
        }
    }
    new Contoroller();//实例化Conteroller



   //面向过程的写法
  /*  let btnDom = document.getElementsByClassName("btn")[0];
   let divDom = document.getElementsByClassName("box")[0];
   var flag = true;
   btnDom.onclick = function(){
       if(flag){
           divDom.style.display = "none"
           flag = false;
        }else{
            divDom.style.display = "block"
            flag = true;
       }
   } */
</script>

Vue的MVVM设计模式

Vue入门01

vue中采用了mvvm设计模式 mpc/mvp演变成mvvp
mvvp解决了mvc反馈不及时的问题，或者实现了自动同步的功能

为什么model层数据改变了，vm就可以知道数据改变了呢?

（vue的mvvm的双向数据绑定的原理！）

（以下三种说法都正确）

vue在创建vm的时候，会将数据配置到实例当中，然后通过Object.defineProperty对数据进行操作
为数据动态的添加的get 和 set 方法，当获取数据的时候，将会触发get方法，当我们设置数据时，
将会触发set方法，从而进一步触发vm的watcher方法，数据改变完成，vm会触发视图的更新操作

vue中通过数据劫持 &订阅发布模式：

通过Object.defineProperty对所有的数据进行劫持，当数据发生变化的时候，会触发自身的set方法然后发布消息给订阅者，触发其相应的监听回调。

实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方法，通过Object.defineProterty()来劫持各个属性的setter，getter，在数据变动时，发布消息给订阅者，触发相应的监听回调

Vue支持的数据类型

String
num
bool
undefined  【不会渲染】
null       【不会渲染】
arr
object
function
·
·
·

<body>
    <div id="app">
        <p> {{msg}}</p>
        <p>{{num}}</p>
        <p>{{bool}}</p>
        <p>{{arr[0]}}</p>
        <p>{{fn()}}</p>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:'hello vue',
                num:2,
                bool:false,
                arr:[1,2,3],
                fn:function(){
                    return 1+1
                }
            }
        })
    </script>
</body>

Vue指令 v-XXX

1、v-for

这是一个指令，只要有v-的就是指令（directive 操作dom ）

在vue中可以通过v-for来循环数据的通知循环dom，语法是item in/of items，接收第二个参数是索引 (item,index) of items,还可以循环键值对，第一个参数是value，第二个是key，第三个依然是索引

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">{{index+1}}、{{item}}</li>
        </ul>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        /* 
            我们在body里面写的东西都是假的
            在上面写的，叫做模板。实例会将模板编译一波之后再渲染到页面
            带v-的，我们叫做指令，指令的作用就是操作Dom
        */
        new Vue({
            el:"#app",
            data:{
                arr:["苹果","香蕉","凤梨"]
            }
        })
    </script>
</body>

2、v-for_json

<body>
    <div id="app">
        <ul>
            <li v-for="(item,key,index) in person">{{index}}、{{key}}：{{item}}</li>
        </ul>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                person:{
                    name:"三叔",
                    age:48
                }
            }
        })
    </script>
</body>

5、v-for_key

为了避免重复的数据在数据更改的时候会出现渲染问题
angularJs、vue1.0里需要加trac-by才能避免这个问题
并且如果有重复的数据也需要加这个
所以需要加 :key 属性，值是每一个元素唯一的标识
[https://blog.csdn.net/weixin_42695446/article/details/84680213]

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in number" :key="index">{{index+1}}、{{item}}</li>
        </ul>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                number:[1,2,3,4,5]
            }
        })
    </script>

6、v-for_template

触发视图的更新操作 ==>数组的异变方法

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
- 由于JavaScript 的限制，vue不能检测以下数组的变动：
- 当利用索引直接设置一个数组项的时候，例如：vm.arr.[indexOfItem] = newValue
- 当修改数组长度的时候，例如 vm.arr.length = newLength

<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>姓名：</th>
                    <th>性别：</th>
                    <th>年龄：</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in person">
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.age}}</td>
                </tr>
                <tr v-for="item in arr">
                    <td>{{item}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                person:[
                    {name:"大熊",sex:"男",age:6},
                    {name:"叮当",sex:"男",age:8}
                ],
                arr:[1,2,3,4,5]
            }
        })
       
        // vm.person.push({name:"静香",sex:"女",age:8})
        // vm.arr.push(369)
        // vm.arr.length = 1// 无效
        // vm.arr[1] = 222  //无效
        vm.arr.push(31)
    </script>

</body>

v-on

 v-on指令  绑定事件  v-on:click ===>@click 简写
            @click.stop      阻止事件冒泡 ===> e.stopPropagation()
            @click.prevent   取消事件默认行为 ===>e.preventDefault()
            @click.once      只会触发一次
            @click.self      只会自身触发

<body>
    <div id="app">
        <p>num:{{num}}</p>
        <p><button v-on:click="num++">点击num</button></p>
        <p><button @dblclick="num++">双击num</button></p>
        <ul @click="clickUl">
            <li @click.once="clickLi">111</li>
        </ul>
        <form @submit.pervent="submits">
            <input type="text" name="name">
            <button type="submit">提交</button>
        </form>
        <button @contextmenu.prevent="contextmenu">
            右键点我
        </button>

        <p>
            <input type="text" @keyUp.f2="up">
        </p>
        <p>
            <input type="text" @keyUp.enter="kup">
        </p>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        Vue.config.keyCodes.f2 = 113//定义键码标识，按键盘的113号键码就可以触发up方法
        new Vue({
            el:'#app',
            data:{
                num:1
            },
            methods:{
                up(e){
                    console.log("按F2了!!")
                },
                clickLi(e){
                    console.log("li被点击了")
                    e.stopPropagation()//阻止默认行为
                },
                clickUl(){
                    console.log("Ul被点击了！！")
                },
                submits(e){
                    console.log("取消form默认行为了！")
                },
                contextmenu(){
                    console.log("右键菜单被取消了！！")
                },
                kup(){
                    console.log("按回车了！")
                }
            }
            
        })

        /* 
            v-on指令  绑定事件  v-on:click ===>@click 简写
            @click.stop      阻止事件冒泡 ===> e.stopPropagation()
            @click.prevent   取消事件默认行为 ===>e.preventDefault()
            @click.once      只会触发一次
            @click.self      只会自身触发

        */
    </script>
</body>

7、v-model

<body>
    <div id="app">
        <p>
            <input type="text" v-model="message">{{message}}
        </p>
        <p> <!-- //lazy 失去光标时触发 -->
            <input type="text" v-model.lazy="message">{{message}}
        </p>
        <p> <!-- //number  这个值无法被parseFloat的时候会返回原值。如果能被parseFloat解析，就会被解析了 -->
            <input type="text" v-model.number="message">{{message}}
        </p>
        <p> <!-- //trim  这个用来去掉前后的空白字符 -->
            <input type="text" v-model.trim="message">{{message}}
        </p>
    </div>
    <script src="/base/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                message:"hello vue"
            }
        })
    </script>
</body>

在vue中还有v-on来为dom绑定事件，在v-on：后面加上要绑定的事件类型，值里可以执行一些简单javascript表达式：++ – = …

可以将一些方法设置在methods里，这样就可以在v-on:click的值里直接写方法名字可以，默认会在方法中传入事件对象，当写方法的时候加了()就可以传参，这个时候如果需要事件对象，那就主动传入$event

v-on绑定的事件可以是任意事件,v-on:可以缩写为@

为什么在 HTML 中监听事件?

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

Vue入门01

Hello Vue！！

每一个应用都是从创建一个实例开始的

声明式渲染声明一条数据，然后利用特殊的模板语法将其渲染出来

Vue遵从MVC设计模式

例题

Vue的MVVM设计模式

为什么model层数据改变了，vm就可以知道数据改变了呢?

（vue的mvvm的双向数据绑定的原理！）

Vue支持的数据类型

Vue指令 v-XXX

1、v-for

2、v-for_json

5、v-for_key

6、v-for_template

v-on

7、v-model

vue-cli监听组件加载完成的方法

vue踩坑记录之数组定义和赋值问题

vue实现微信获取用户信息的方法

vue在自定义组件中使用v-model进行数据绑定的方法

vscode配置vue下的es6规范自动格式化详解

vue中axios请求的封装实例代码

Vue框架下引入ActiveX控件的问题解决

Vue服务端渲染实践之Web应用首屏耗时最优化方案

详解vue中axios的使用与封装

vue里如何主动销毁keep-alive缓存的组件

Vue入门01

Hello Vue！！

每一个应用都是从创建一个实例开始的

声明式渲染 声明一条数据，然后利用特殊的模板语法将其渲染出来

Vue遵从MVC设计模式

例题

Vue的MVVM设计模式

为什么model层数据改变了，vm就可以知道数据改变了呢?

（vue的mvvm的双向数据绑定的原理！）

Vue支持的数据类型

Vue指令 v-XXX

1、v-for

2、v-for_json

5、v-for_key

6、v-for_template

v-on

7、v-model

vue-cli监听组件加载完成的方法

vue踩坑记录之数组定义和赋值问题

vue实现微信获取用户信息的方法

vue在自定义组件中使用v-model进行数据绑定的方法

vscode配置vue下的es6规范自动格式化详解

vue中axios请求的封装实例代码

Vue框架下引入ActiveX控件的问题解决

Vue服务端渲染实践之Web应用首屏耗时最优化方案

详解vue中axios的使用与封装

vue里如何主动销毁keep-alive缓存的组件

声明式渲染声明一条数据，然后利用特殊的模板语法将其渲染出来