vue基础教程

时间：2025-01-15 21:20:32

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

目录

  • 引入vue
  • 声明式渲染
  • 创建vue实例
  • 数据绑定
  • 方法
  • 插值
  • 指令
  • 缩写

引入vue

  • 下载文件：点击下载

<script src="/npm/vue/dist/"></script>

  • CDN线上，引入地址：/vue/2.5.17-beta.0/

<script src="/vue/2.5.17-beta.0/"></script>

  • 新建html文件，在head标签内引入
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>引入vue</title>
    <script src="../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/"></script>
  </head>
  <body>
    <div id="app">
    {{ msg }}
    </div>
    {{ msg }}
    <script>
      new Vue({
       el: '#app',
       data: {
         msg: '111'
       }
      })
    </script>
  </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/">
    </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/"></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/"></script>
</head>
<body>
    <div id="app">
        <!-- 在这里写 -->
    </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/"></script>
</head>
<body>
    <div id="app">
        <!-- 在这里写 -->
        <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/"></script>
</head>
<body>
    <div id="app">
        <!-- 在这里写 -->
        <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:="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>

原文链接：/note/vue-basic-tutorial

相关文章