vue基础教程

最新推荐文章于 2024-03-29 10:27:35 发布

马克关

最新推荐文章于 2024-03-29 10:27:35 发布

阅读量5.7k

点赞数 1

分类专栏：前端框架库文章标签： vuejs vue基础

本文链接：https://blog.csdn.net/fed_guanqi/article/details/95903236

版权

前端框架库专栏收录该内容

38 篇文章 0 订阅

订阅专栏

导语：今天给大家讲解vue的基础知识点。

引入vue

下载vue.js文件：点击下载

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

CDN线上，引入地址：https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.common.js

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.common.js"></script>

新建html文件，在head标签内引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>引入vue</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
    <!-- //内容 -->
    </div>

    {{ 1+2 }}
    <script>
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

声明式渲染

两个花括号中间可以写表达式，判断，数据类型，就是不能写循环。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>引入vue</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
    {{ msg }}
    </div>
    {{ msg }}
    <script>
      new Vue({
       el: '#app',
       data: {
         msg: '111'
       }
      })
    </script>
  </body>
</html>

创建vue实例

首先引入vue.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue(2)</title>
    <script src="js/vue.js">
    </script>
</head>
<body>
</body>
</html>

然后实例化一个vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue(2)</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <script>
        var vm = new Vue({
            el: '#app',
        })
    </script>
</body>
</html>

最后定义vue的管理边界

注意：如果你不定义管理边界，就可能无法应用vue中的属性和方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue(2)</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 在这里写vue.js -->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
        })
    </script>
</body>
</html>

数据绑定

数据：这里的数据就是你要渲染到页面中的值,这个数据发生变化，视图中的数据也会发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue(2)</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 在这里写vue.js -->
        <input type="text" v-model="str">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                str: ''
            }
        })
    </script>
</body>
</html>

方法

方法：就是js中的函数和事件监听。

例如：弹出一个信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue(2)</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 在这里写vue.js -->
        <input type="text" v-model="str">
        <p>{{ str }}</p>
        <button @click="alertInfo">弹出信息</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                str: ''
            },
            methods: {
                alertInfo () {
                    alert('这就是vue');
                }
            }
        })
    </script>
</body>
</html>

插值

文本插值

这是数据绑定最常见的形式，使用的Mustache语法 (双大括号) 。

例如：<span>这个将不会改变: {{ msg }}</span>

原生html内容

这个你需要使用v-html来实现。

例如：

1.<p>这是html内容：{{ sanHtml }}</p>

2.<p v-html="str"></p>

注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。

指令

指令 (Directives) 是带有 v- 前缀的特殊特性，响应式的作用于DOM。

v-if

含义：这个是根据传入的值来决定是否移除绑定的元素，它的值是true或者false

例如：<p v-if="true">我是vue</p>

修饰符

修饰符：以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

<form v-on:submit.prevent="onSubmit">表单内容</form>

缩写

v- 作为一种识别特性，常常会缩写，以便提高代码效率。

v-on

v-on是绑定元素要触发的各种事件的，可以缩写成@<事件名>="<触发的函数名>"

例如：

//1.原样：
<button v-on:click="checkForm"></button>
//2.缩写：
<button @click="checkForm"></button>

v-bind

v-bind是绑定元素属性的一种指令，可以缩写成:<属性名>="<属性值>"

例如：

<!-- 1.原样： -->
<a v-bind:href="url">链接</a>
<!-- 2.缩写： -->
<a :href="url">链接</a>

原文链接：https://guanqi.xyz/note/vue-basic-tutorial

马克关

关注

1
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
vue基础教程

导语：今天给大家讲解vue的基础知识点。目录引入vue声明式渲染创建vue实例数据绑定方法插值指令缩写引入vue下载vue.js文件：点击下载<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>CDN线上，引入地址：https://cdn.bootcs...
复制链接

扫一扫