Vue学习--1、Vue安装和模板语法

最新推荐文章于 2022-10-26 21:10:11 发布

毕九生

最新推荐文章于 2022-10-26 21:10:11 发布

阅读量284

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_39400984/article/details/100007048

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、`Vue`安装

1、安装Vue.js

安装node.js。
Vue Devtools：在一个更友好的界面中审查和调试 Vue 应用。安装：https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md。
开发版本：https://cn.vuejs.org/js/vue.js，包含完整的警告和调试模式。生产版本：https://cn.vuejs.org/js/vue.min.js，删除了警告，33.30KB min+gzip。

2、NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

3、NPM安装vue.js：命令：npm install vue -g，这里的-g是指安装到global全局目录去。

4、NPM安装vue-router命令：npm install vue-router -g。

5、运行npm install vue-cli -g，安装vue脚手架。

6、安装 webpack：npm install webpack -g。

7、安装ij-rpc-client：npm install ij-rpc-client -g

7、WebStorm创建Vue项目。

8、执行 Ctrl + E 或者鼠标悬停package.json+单击右键并选择Show npm Scripts，然后 双击 选择 dev运行，演示项目。

http://localhost:8080

二、`Vue.js`是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

目录解析

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

三、`Vue`起步

1、每个 Vue 应用都需要通过实例化 Vue 来实现。

var vm = new Vue({
    // 选项
})

2、通过实例来看下Vue 构造器中需要哪些内容：

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟",
            url: "www.baidu.com",
            alexa: "5201314"
        },
        methods: {
            details: function() {
                return  this.site + " - HelloWorld!";
            }
        }
    })
</script>

3、在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：

<div id = "vue_det"></div>

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

如何定义数据对象：

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

4、当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
// 它们引用相同的对象！
document.write(vm.site === data.site) // true
document.write("<br>")
// 设置属性也会影响到原始数据
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob
 
// ……反之亦然
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>

5、除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
 
document.write(vm.$data === data) // true
document.write("<br>") 
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>

四、`Vue.js` 模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

1、插值

文本：数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

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

Html：使用 v-html 指令用于输出 html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueDemo</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-html="message"></div>
</div>
<script>
    new Vue({
        el:'#app',
        data: {
            message: "<h1>你好</h1>"
        }
    })
</script>
</body>
</html>

2、属性

HTML 属性中的值应使用 v-bind 指令。以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>VueDemo</title>
    <script src="../js/vue.js"></script>
    <style>
        .class1{
            background: #444444;
            color: #eeeeee;
        }
    </style>
</head>
<body>
<div id="app">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <br><br>
    <div v-bind:class="{'class1': use}">
        v-bind:class 指令
    </div>
</div>

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

3、表达式

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

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>VueDemo</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            ok: true,
            message: 'RUNOOB',
            id : 1
        }
    })
</script>
</body>
</html>

4、指令

指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueDemo</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>

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

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

5、参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>VueDemo</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            url: 'http://www.runoob.com'
        }
    })
</script>
</body>
</html>

href 是动态参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">

这里参数是监听的事件名。

6、修饰符

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

<form v-on:submit.prevent="onSubmit"></form>

7、用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>VueDemo</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'HelloWorld!'
        }
    })
</script>
</body>
</html>

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。按钮的事件可以使用 v-on 监听事件，并对用户的输入进行响应。

以下实例在用户点击按钮后对输入的字符串进行反转操作，响应式编程：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>VueDemo</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message"> 
    <button v-on:click="reverseMessage">反转字符串</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'HelloWorld!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>

8、过滤器

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

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

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

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

以下实例对输入的字符串第一个字母转为大写：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>VueDemo</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message | capitalize }}
    <br />
    <input v-model="message">
</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 表达式的值将被求值然后传给过滤器作为第三个参数。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>VueDemo</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message | capitalize }}
    <br />
    {{ message | filterA(' s ',' b') }}
    <br />
    <input v-model="message">
</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)
            },
            filterA: function (a, b, c) {
                return a + ',' + b + ',' + c;
            }
        }
    })
</script>
</body>
</html>

9、缩写

v-bind 缩写

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

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

v-on 缩写

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

毕九生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录