vue学习第一天

最新推荐文章于 2024-08-07 20:34:45 发布

骑着猪区见上帝

最新推荐文章于 2024-08-07 20:34:45 发布

阅读量161

点赞数

本文链接：https://blog.csdn.net/qq_40959641/article/details/104356252

版权

1.1 VueJS介绍
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
官网:https://cn.vuejs.org/

1.2 MVVM模式
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开 MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷

插值表达式:{{}}
例如

{{number+1}}
{{number == 2 ?  44::66}}

vue常用系统指令
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
@事件名称就是v-on的简写
例如:

<script src="js/vuejs-2.5.16.js"></script>
<body>
<div id="vue">
    {{message}}
    <!-- 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码 -->
<button v-on:click="fun1('Vue')">点击改变</button>
    <input type="text" v-on:keydown="fun2($event)">
    <input type="text" @keydown="fun2($event)">
</div>
</body>
<script>
    new Vue({
        el:"#vue",
        data:{
            message:"bad",
        },
        methods:{
            fun1:function (mes) {
                alert(mes)
    this.message=mes;
    },
    fun2:function (event) {
        console.log(event)
        if (event.keyCode <48 || event.keyCode >=65) {
            event.preventDefault();
        }
    }
    }
    })
</script>

事件处理
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.capture：与事件冒泡的方向相反，事件捕获由外到内
.self：只会触发自己范围内的事件，不包含子元素
.once：只会触发一次

-- 键盘修饰符
.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键

插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令,
例如:

<div id="app">
        <div id="text" v-text="message"></div>
        <div id="html" v-html="v_html"></div>
        <font v-bind:color="color">试试颜色</font>
        <font :color="color">？？？？？</font>
    </div>
     /**
     * <!-- 完整语法 -->
     *     <a v-bind:href="url">...</a>
     * <!-- 缩写 -->
     *     <a :href="url">...</a>
     */
<script>
//v-text与v-html
 new Vue({
        el:"#app",
        data:{
            message:"v-text",
            v_html:"<h1>demo</h1>",
            color:"green",
        }
    })
  </script>

v-for 循环

<script src="js/vuejs-2.5.16.js"></script>
<body>
    <div id="app">
        <!-- 数组-->
        <ul>
            <li v-for="(item) in message">{{item}}</li>
        </ul>
        <!-- 对象-->
        <ul>
            <li v-for="(key,value) in product">{{value}}=={{key}}</li>
        </ul>
        <!-- 集合对象-->
        <table>
            <tr>
                <td>编号</td>
                <td>商品名</td>
                <td>价格</td>
            </tr>
            <tr v-for="(item) in products">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.money}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:[1,2,3,4,5],
            product:{
                id:1,
                name:"电视机",
                money:5000
            },
            products:[{id:1,name:"笔记本",money:3500},{id:2,name:"台式电脑",money:4500}]
        }
    })
</script>

Mustache (双大括号写法)不能在 HTML 属性中使用，应使用 v-bind 指令：

这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除：

Button

1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值=“表达式”

2:v-bind用于绑定属性和数据，其缩写为“ : ” 也就是v-bind:id === :id

3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

v-if与v-show

<!--
    v-if是根据表达式的值来决定是否渲染元素
    v-show是根据表达式的值来切换元素的display css属性
-->
<script src="js/vuejs-2.5.16.js"></script>
<body>
    <div id="app">
        <span v-if="flag">v-if是根据表达式的值来决定是否渲染元素<br></span>
        <span v-show="flag">v-show是根据表达式的值来切换元素的display css属性</span>
        <button @click="toggle">点击切换</button>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            flag:false,
        },
        methods:{
            toggle:function () {
                this.flag = !this.flag
            }
        }
    })
</script>

vue的生命周期

beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
created ：数据已经绑定到了对象实例，但是还没有挂载对象
beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点
mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作
当我们的data发生改变时，会调用beforeUpdate和updated方
beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变
updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的小路径，将改变更新到 dom上面，完成更新
beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动