Vue的使用

VUE

文章目录
Vue3 教程 | 菜鸟教程 (runoob.com)

一、入门

说实话，我是蛮不喜欢前端的东西的，但是由于工作关系不得不学，真的血之难受兄弟们

1.1 环境准备

1. Vue框架的js文件获取

   官网提供的下载地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

2. 创建空 vue.js 文件，将官网提供的vue.js文件的内容复制粘贴到本地 vue.js 文件中

1.2 入门案例

编写完下述代码以后，打开html文件即可看到效果

1.3 初步总结

这是一个数据绑定及响应式的一个框架，类似于说实现了一个前端版的thymeleaf，自己跟自己就可以玩了起来

上述的步骤不过三步

1. 绑定 vue.js 文件
2. 声明id，把要渲染的数据用 { {}} 封起来
3. 写scipt，绑定声明的id，并把实际数据赋值

HTML代码

<!-- 使用{
   {}}格式，指定要被渲染的数据 -->
<div id="app">{
  {message}}</div>

vue代码

// 1.创建一个JSON对象，作为new Vue时要使用的参数
var argumentJson = {
   
	
	// el用于指定Vue对象要关联的HTML元素。el就是element的缩写
	// 通过id属性值指定HTML元素时，语法格式是：#id
	"el":"#app",
	
	// data属性设置了Vue对象中保存的数据
	"data":{
   
		"message":"Hello Vue!"
	}
};

// 2.创建Vue对象，传入上面准备好的参数
var app = new Vue(argumentJson);

你学废了吗

二、基本使用

我先把一个大纲罗列出来，看看有哪些玩法…算了，懒

2.1 文本绑定

v-text=“要绑定的数据模型”

<div id="app">
    <!--
        v-text其实就是将数据模型的值绑定在标签体内
	这种就等价于	<div id="app">{
   {city}}</div>
    -->
    <div v-text="city"></div>
</div>

<script>
    var vue = new Vue({
     
        "el":"#app",
        "data":{
     
            "city":"武汉"
        }
    })
</script>

2.2 元素绑定

v-bind:HTML标签的原始属性名

v-bind:属性名="属性值"可以简写成 :属性名=“属性值”

<div id="app">
    <!--
    绑定属性:
    v-bind:属性名="数据模型"
    简写:
    :属性名="数据模型"
    -->
    <input type="text" :id="idValue" :value="inputValue"/>
</div>

<script>
var vue = new Vue({
     
    "el":"#app",
    "data":{
     
        "idValue":1,
        "inputValue":"张三"
    }
});
</script>

2.3 双向数据绑定

首先理解什么是 双向绑定

例如，我在页面有一个文本框，我输入了一些内容，而我的data里面的数据也随之改变

就是说，页面上数据被修改后，Vue对象中的数据属性也跟着被修改

<div id="app">
    <!--
    双向绑定，针对的是表单项的value属性,我们使用v-model:value="数据模型"
    双向绑定的作用: 便于用户可以通过数据模型获取表单项的内容(value)
    双向绑定的简写:
    v-model="数据模型"
    -->
    <input type