走进vue-认识Vue.js_谈谈你对vue.js的认识-优快云博客

本文链接：https://blog.youkuaiyun.com/hong_hq/article/details/104458573

什么是vue.js

Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
vue.js是一个前端框架，他与jquery不同，jquery是一个js库，而vue.js是js的前端框架。
Vue是一个渐进式的javascript框架

官网：https://cn.vuejs.org/

在这里插入图片描述

发展历史

Vue1.0 MVVM 2014.07
Vue2.0 MVVM 2016.09

架构思想（MVVM)

M Model 数据层
V View 视图层
C Controller 控制器（业务逻辑） MVC
P Presenter 提出者（Controller改名而来） MVP
VM View Model 视图模型（业务逻辑） MVVM

Vue遵循MVVM模式（MVC/MVP/MVVM）
在这里插入图片描述
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

vue基础

在全局注册一个Vue变量，它是一个构造函数

<script>  var vm = new Vue({ el: '#app',//挂载：将一个已有的DOM元素的选择器挂载在构造函数的选项上，data: { msg: 'Hello Vue' } }) </script>

模板语法
内容里加{{ }} （双大括号）

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

vue常用的一些指令

使用方法
-绑定在dom的属性身上
-为了区别自定义属性，vue提供的指令都携带 v-
v-bind ：用于绑定属性的指令。可以简写为 :要绑定的指令。

<div v-bind:class="mycolor'">1111111</div>
<script>
            var vm = new Vue({
                el: '#app',
                data: {
                    mycolor: 'red'
                }
            })
        </script>

3.v-if 动态创建/删除（v-show 其用法和 v-if 相同也可以设置元素的显示或隐藏）

<div id="app">
            <p v-if="seen">你看到我了吗</p>
 </div>
 <script>
            new Vue({
                el: '#app',
                data: {
                    seen: true
                }
            })
 </script>
//如果seen为true  显示p标签  否则隐藏

4.v-for 循环遍历数组或对象

<div id="app">
            <ul>
                <li v-for="item in datalist">
                    {{item }}
                </li>
            </ul>
  </div>
  <script>
            new Vue({
                el: '#app',
                data: {
                    datalist: [
                           "aaa","bbb","ccc"
                        ]
                }
            })
  </script>

5.v-on ：click 绑定事件（可以简写为 @click）

<div id="app">
            <button v-on:click="handleClick">click</button>
 </div>
  <script>
            var app = new Vue({
                el: '#app',
                data: {
                },
                // 在 `methods` 对象中定义方法
                methods: {
                         handleClick(){
                         console.log(666)
                         }
                    }
            })
    </script>

6.v-model:可以实现表单元素和 M中数据的双向绑定
注意：v-model指令只能运用在表单元素中。

<div id="app">
            <h4>{{ msg }}</h4>
            <input type="text"  v-model="msg">
 </div>

  <script>
            // 创建 Vue 实例，得到 ViewModel
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: '大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'
                }
            });
 </script>