VUE

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

快速入门

新建 HTML 页面，引入 Vue.js文件

<scriptsrc="js/vue.js"></script>

在JS代码区域，创建Vue核心对象，进行数据绑定

newVue({
    el: "#app",
    data() {
        return {
            username: ""
        }
    }
});

创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：

el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值

data ：用来定义数据模型

methods ：用来定义函数。这个我们在后面就会用到

编写视图

<divid="app">
    <inputname="username"v-model="username">
    {{username}}
</div>

插值表达式

{{}} 是 Vue 中定义的插值表达式，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

形式：{{表达式}}。

内容可以是：变量、三元运算符、函数调用、算术运算

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>
<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){  // data() 是 ECMAScript 6 版本的新的写法
            return {
                username:""
            }
        }

        /*data: function () {
            return {
                username:""
            }
        }*/
    });

</script>
</body>
</html>

Vue 指令

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

<!-- v-bind -->
<a v-bind:href="url">百度一下</a>
<!--
    v-bind 可以省略
-->
<a :href="url">百度一下</a>

<!-- v-model -->
<input name="username" v-model="username">

<!-- v-on -->
<input type="button" value="一个按钮" v-on:click="show()">
<!-- 
    而使用 `v-on` 时还可以使用简化的写法，将 `v-on:` 替换成 `@`，html代码如下 
-->
<input type="button" value="一个按钮" @click="show()">
<!-- 
    上面代码绑定的 `show()` 需要在 Vue 对象中的 `methods` 属性中定义出来 
-->
new Vue({
    el: "#app",
    methods: {
        show(){
            alert("我被点了");
        }
    }
});

<!-- v-show -->
<div v-show="count == 3">div v-show</div>
<br>
<input v-model="count">

<!-- v-for -->
<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>
 <div v-for="addr in addrs">
        {{addr}} <br>
    </div>
<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}} <br>
    </div>

声明周期以及mounted

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中==发送异步请求，加载数据

原文链接：https://blog.csdn.net/weixin_52234593/article/details/129530406