Vue.js（1）入门笔记

ruyulin

于 2018-07-07 22:02:37 发布

阅读量184

点赞数

分类专栏： Vue.js 文章标签： vue vuejs 入门参考

本文链接：https://blog.csdn.net/ruyulin/article/details/80954030

版权

Vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue介绍

Vue是构建用户界面的渐进式框架，现在很多应用都是用SPA（单页面）应用，他是基于数据驱动的，通过更改数据源，界面就是发生变化。他是MVVN（Model、View、ViewModel）模式。

MVC与MVVN的区别

MVC是后端的开发概念，比如JAVA WEB的SpringMVC。 MVC分成模型、视图、控制器。
MVVN是前端视图层的感念，主要关注与视图层的分离，将前端视图层，分为了：Model（模型）、View（视图）、ViewModel（模型与视图绑定）。

如何使用

Vue使用有多种方式，如果不是用Nodejs的话可以直接引入CDN
以下是官网提供的CDN：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

如果是Nodejs环境的话：

$ npm install vue

官方地址

官方地址:
https://cn.vuejs.org
Github:
https://github.com/vuejs/vue
参考文档：
https://cn.vuejs.org/v2/guide/installation.html

第一个Vue Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
<div id="app">
    <p>{{ message }}</p>
</div>
<script type="text/javascript">
    window.onload = function(){
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            }
        });
    }
</script>
</body>
</html>

常用指令

1、v-cloak指令

v-cloak指令用来解决表达式闪烁的问题，在实际的环境，我们的数据是通过网络ajax请求的，那么如果网络的慢的请求，那么页面显示{{ xxx }}这样的内容，影响用户体验。解决方式一，可以使用该v-cloak配合样式“[v-cloak]{ display: none;}”来解决。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        [v-cloak]{ display: none;}
    </style>
</head>
<body>
<div id="app">
    <p v-cloak>{{ message }}</p>
</div>
<script type="text/javascript">
    window.onload = function(){
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            }
        });
    }
</script>
</body>
</html>

2、v-text指令

v-text指令与{{ message }}表达式功能类似，用于显示数据。他们也有一些区别
v-text没有表达式闪烁的问题
v-text会将元素内替换调用，而表达式方式只是替换占位符内容

<div id="app">
    <p v-text="message"></p>
</div>

3、v-html指令

Vue默认会将date数据中包含html标签的进行转移输出，如果我们需要显示数据的标签，可以使用v-html指令

<div id="app">
    <p v-html="message"></p>
</div>

4、v-bind指令

v-bind指令其实就是将标签内部属性通过指令绑定到Vue的data的数据名，那么标签被绑定的属性值，取的是数据里面的值。
使用方式
v-bind:title=”
或者
:title=”

//双引号title是当成js表达式进行执行的，我们可以在双引号中写js表达式
<input type="button" v-bind:title="title">

5、v-on指令

v-on指令是标签事件绑定机制。绑定事件需要在vue的methods属性中声明方法
使用方式：
v-on:click=”show”
或者
@click=”show”

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <!--show 是方法名称-->
    <input type="button" value="点击" title="点击" v-on:click="show">
</div>
<script type="text/javascript">
    window.onload = function(){
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            },
            methods:{
                show : function(){
                    alert("点击率");
                }
            }
        });
    }
</script>
</body>
</html>

事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 阻止事件冒泡-->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用注意

在Vue实例中想要访问data中的数据需要使用this
Vue实例会监听data中的数据，只要数据发生改变，就会自动把数据同步到页面中。这样我们只需要关心数据

ruyulin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js（1）入门笔记

Vue介绍Vue是构建用户界面的渐进式框架，现在很多应用都是用SPA（单页面）应用，他是基于数据驱动的，通过更改数据源，界面就是发生变化。他是MVVN（Model、View、ViewModel）模式。MVC与MVVN的区别MVC是后端的开发概念，比如JAVA WEB的SpringMVC。 MVC分成模型、视图、控制器。 MVVN是前端视图层的感念，主要关注与视图层的分离，将前端视...
复制链接

扫一扫