vue基础教程
导语：今天给大家讲解vue的基础知识点。
目录
- 引入vue
- 声明式渲染
- 创建vue实例
- 数据绑定
- 方法
- 插值
- 指令
- 缩写
引入vue
- 下载vue.js文件：点击下载
- CDN线上，引入地址：
https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.common.js
- 新建html文件，在head标签内引入
<html>
<head>
<meta charset="UTF-8">
<title>引入vuetitle>
<script src="../js/vue.js">script>
head>
<body>
<div id="app">
div>
{{ 1+2 }}
<script>
new Vue({
el: '#app'
})
script>
body>
html>
声明式渲染
两个花括号中间可以写表达式，判断，数据类型，就是不能写循环。
<html>
<head>
<meta charset="UTF-8">
<title>引入vuetitle>
<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文件
<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
<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中的属性和方法。
<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">
div>
<script>
var vm = new Vue({
el: '#app',
})
script>
body>
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">
<input type="text" v-model="str">
div>
<script>
var vm = new Vue({
el: '#app',
data: {
str: ''
}
})
script>
body>
html>
方法
方法： 就是js中的函数和事件监听。
例如：弹出一个信息。
<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">
<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语法 (双大括号) 。
例如：这个将不会改变: {{ msg }}
原生html内容
这个你需要使用v-html来实现。
例如：
1. 这是html内容：{{ sanHtml }}
2.
注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。
指令
指令 (Directives) 是带有
v-前缀的特殊特性，响应式的作用于DOM。
v-if
含义：这个是根据传入的值来决定是否移除绑定的元素，它的值是true或者false
例如： 我是vue
修饰符
修饰符：以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
缩写
v- 作为一种识别特性，常常会缩写，以便提高代码效率。
v-on
v-on是绑定元素要触发的各种事件的，可以缩写成@<事件名>="<触发的函数名>"
例如：
//1.原样：
<button v-on:click="checkForm">button>
//2.缩写：
<button @click="checkForm">button>
v-bind
v-bind是绑定元素属性的一种指令，可以缩写成:<属性名>="<属性值>"
例如：
<a v-bind:href="url">链接a>
<a :href="url">链接a>
原文链接：https://guanqi.xyz/note/vue-basic-tutorial