Vue 学习（一）

原创已于 2024-01-12 14:06:08 修改 · 971 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #学习 #webpack

于 2022-08-11 16:19:16 首次发布

Vue学习专栏收录该内容

2 篇文章

订阅专栏

1.第一个实例

script标签在HTML页面放置的位置
https://blog.csdn.net/weixin_45832482/article/details/123289919

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<div id="app">
	    <p> {{message}}</p>
	</div>
	<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
	<script>
	    new Vue({
	        el: '#app',
	        data: {
	            message: 'Hello'
	        }
	    })
	</script>
</body>
</html>

2.安装

2.1 安装nvm

用于下载和管理nodejs的版本

nvm安装与使用
https://www.jianshu.com/p/4849adf7fccc

nvm list
nvm list available
nvm install [node版本号] 
nvm uninstall [node版本号]
nvm use [node版本号]

2.2 nodejs

通过nvm下载nodejs

node -v

2.3 npm

npm是nodejs的包管理和分发工具，nodejs中包含npm。

npm 常用命令
https://blog.csdn.net/qq_39579242/article/details/123169709

npm -v
npm config list
npm config set registry https://registry.npm.taobao.org  //设置淘宝镜像源
npm config set registry https://registry.npmjs.org  //设置npm源
npm install cnpm -g --registry= https://registry.npm.taobao.org //安装淘宝镜像

3.构建Vue项目

3.1 安装Vue.js

（1）直接下载vue.min.js，并用 script标签引入
（2）使用 CDN 方法

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

（3）使用NPM安装

cnpm install vue

3.2 创建项目

cnpm install --global vue-cli  // 全局安装 vue-cli
vue init webpack my-project  // 创建一个基于 webpack 模板的新项目
cd my-project
cnpm install  // 安装依赖
cnpm run dev  // 运行

3.3 Vue 项目打包并运行

3.3.1 打包

// 执行完成后，会在 Vue 项目下生成一个 dist 目录，一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images。
// 如果直接双击 index.html 打开浏览器，页面可能是空白了，想要正常显示，可以修改 index.html 文件中 js、css 文件的路径。
npm run build

3.3.2 开发测试-项目中运行

npm run dev

3.3.3 服务器部署-运行dist文件

// 运行dist
npm i -g serve
cd dist
serve

4.Vue项目结构

目录/文件	说明
build	项目构建(webpack)相关代码。
config	配置目录，包括端口号等。初学可以使用默认的。
node_modules	npm 加载的项目依赖模块。
src	开发目录 (1) assets: 放置一些图片，如logo等。(2) components: 存放组件。(3) App.vue: 项目入口文件，可以直接将组件写这里，而不使用 components 目录。(4) main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除。
.xxxx文件	一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

4.1 Vue文件加载执行流程

（1）执行index.html文件
（2）执行main.js文件
（3）main.js挂载了app.vue文件，用app.vue的templete替换index.html中的
（4）main.js中注入了路由文件，将对应的组件渲染到router-view中
（5）router-view中加载Layout文件
（6）Layout 加载Navbar, Sidebar, AppMain

Vue文件加载执行流程
https://blog.csdn.net/IT__learning/article/details/114294180

npm包的安装与卸载
https://blog.csdn.net/ernijie/article/details/104948880

4.2 修改页面并测试

src/App.vue

<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
// 导入组件
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

<!-- 样式代码 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/components/Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '欢迎来到菜鸟教程！'
    }
  }
}
</script>

5.main.js中实例化Vue

Vue 构造器：
（1）el 参数： DOM 元素中的 id
（2）data：定义属性，实例中有三个属性分别为：site、url、alexa
（3）methods ：定义函数，可以通过 return 来返回函数值
（4）{{ }} ：输出对象属性和函数返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>site: {{site}}</h1>
        <h1>url: {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>

    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

    <script type="text/javascript">
        var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
        var vm = new Vue({
            el: "#app",
            data: data,
            methods: {
                details: function () {
                    return this.site + "aa";
                }
            }
        })
        vm.site = "教程"
        document.write("===========================<br>");
        document.write(vm.site);
        document.write("<br>");
        document.write(vm.$data === data);  // 前缀$，以便与用户定义的属性区分开
        document.write("<br>");
        document.write(vm.$el === document.getElementById('app')) // true
        document.write("<br>===========================");
    </script>
</body>
</html>

6.模板语法

6.1 显示文本：插值表达式 {{ }}

<div id="app">
  <p>{{ message }}</p>
</div>

6.2 显示Html：v-html

使用 v-html 指令输出 html 代码

<body>
    <div id="app">
        <div v-html="t"></div>
    </div>

    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
            	t: '<h1>t111<h1>',
            }
        })
    </script>
</body>

6.3 绑定html属性值：v-bind

HTML 属性中的值应使用 v-bind 指令。

label标签中for属性和input绑定，使得点击label时会选中input。
input标签中v-model实现双向绑定。

v-bind绑定div的class属性。

id选择器#，class选择器.

pre预定义格式，等宽字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .class1 {
        background: aliceblue;
        color: bisque;
    }
</style>
<body>
    <div id="app">
        <label for="i1">点击切换颜色</label>
        <input type="checkbox" id="i1" v-model="use">

        <div v-bind:class="{'class1': use}">
            AAAAAAAAAAAAAAAAAAAA
        </div>

		<pre><a v-bind:href="url">菜鸟教程</a></pre>
    </div>

    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

    <script type="text/javascript">
        new Vue({
            el:"#app",
            data: {
                use: false,
                url: 'http://www.runoob.com'
            }
        })
    </script>
</body>
</html>

6.4 表达式

Vue.js 提供了完全的 JavaScript 表达式支持。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #list1 {
        background: aliceblue;
        color: bisque;
    }
</style>
<body>
    <div id="app">
        {{ 5+5 }} <br>
        {{ ok ? 'true' : 'false' }} <br>
        {{ message.split('').reverse().join('') }}
        <div v-bind:id="'list' + id">AAAA</div>
    </div>

    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

    <script type="text/javascript">
        new Vue({
            el:"#app",
            data: {
                ok: true,
                message : '123456789',
                id: 1
            }
        })
    </script>
</body>
</html>

6.5 条件判断是否显示：v-if

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
v-if 指令将根据表达式的值(true 或 false )来决定是否插入元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <label for="i1">点击显示</label>
    <input type="checkbox" id="i1" v-model="use">

    <p v-if="use">现在你看到我了</p>
    <template v-if="use">
        <h1>菜鸟教程</h1>
        <p>学的不仅是技术，更是梦想！</p>
        <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            use: false
        }
    })
</script>
</body>
</html>

6.6 监听DOM事件：v-on

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="按钮" v-on:click="show()">
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            use: false
        },
        methods: {
            show : function () {
                alert(1);
            }
        }
    })
</script>
</body>
</html>

6.7 修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用event.preventDefault()，阻止默认的事件发生。

下面.prevent会阻止表单在submit后的刷新事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <form v-on:submit.prevent="onSubmit">
        <input type="submit" value="submit">
    </form>
    <form v-on:submit="onSubmit">
        <input type="submit" value="submit">
    </form>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            use: false
        },
        methods: {
            onSubmit : function () {
                console.log('submit')
            }
        }
    })
</script>
</body>
</html>

6.8 用户输入：v-model双向数据绑定

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

6.9 文本格式化：过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | capitalize }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
</body>
</html>

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

6.10 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

7.条件语句：v-if v-else-if v-else

也可以使用 v-show 指令来根据条件展示元素，用法和v-if相同

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .class1 {
        background:blue;
        color: grey;
    }
</style>
<body>
    <div id="app">
        <form>
            <input type="radio" name="sex" value="male" v-model="se">Male<br>
            <input type="radio" name="sex" value="female" v-model="se">Female<br>
            <input type="radio" name="sex" value="None" v-model="se">None<br>
        </form>

        <div v-if="se === 'male'">
            Male
        </div>
        <div v-else-if="se === 'female'">
            Female
        </div>
        <div v-else>
            None
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                se: 'male'
            }
        })
    </script>
</body>
</html>

8.循环语句：v-for

8.1 数组

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .class1 {
        background:blue;
        color: grey;
    }
</style>
<body>
    <div id="app">
        <ul>
            <li v-for="site in sites">
                {{ site.name }}
            </li>
        </ul>

		<ul>
            <template v-for="site in sites">
                <li>{{ site.name }}</li>
            </template>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                sites: [
                    { name: 'Runoob' },
                    { name: 'Google' },
                    { name: 'Taobao' }
                ]
            }
        })
    </script>
</body>
</html>

8.2 迭代对象

通过一个对象的属性来迭代数据：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .class1 {
        background:blue;
        color: grey;
    }
</style>
<body>
    <div id="app">
        <ul>
            <li v-for="object in objects">
                {{ object }}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                objects: {
                    name: '菜鸟教程',
                    url: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                }
            }
        })
    </script>
</body>
</html>

用value-key-index接收数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .class1 {
        background:blue;
        color: grey;
    }
</style>
<body>
    <div id="app">
        <ul>
            <li v-for="(value, key, index) in objects">
                {{ key }} : {{ value }}: {{ index }}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                objects: {
                    name: '菜鸟教程',
                    url: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                }
            }
        })
    </script>
</body>
</html>

迭代整数

<div id="app">
    <ul>
        <li v-for="n in 10">
            {{ n }}
        </li>
    </ul>
</div>