vue基础教程

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

目录

  • 引入vue
  • 声明式渲染
  • 创建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

正文到此结束
本文目录