通过以下代码获取Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue是一种声明式的变成，而原生js是命令式编程
命令式编程（原生JS）：
创建div元素，设置id属性
定义一个变量叫message
将message变量放在div元素中显示
修改message数据
将修改的元素替换到div
声明式编程（Vue）：
创建一个div元素，设置id属性
定义一个vue对象，将div挂载在vue对象上
在vue对象内定义变量message，并绑定数据
将message变量放在div元素上显示
修改vue对象中的变量message，div元素数据自动改变
下面是基础用法：
Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。
data 用于定义属性，本实例中写了一个属性为message。
methods 用于定义的函数，可以通过 return 来返回函数值
{{ }} 用于输出对象属性和函数返回值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>创建一个动态的div</title> <script src="js/vue.js"></script> </head> <body> <!-- 首先创建一个div盒子他的ID为box --> <div id="box"> {{message}} <!-- {{ }} 用于输出对象属性和函数返回值。 --> </div> <button @click="fn1()">点击按钮</button> <!-- 点击事件的写法 --> <script> var box = new Vue({ el:'#box', <!-- 有一个el 参数，它是 DOM 元素中的 id,也就是上方div中的box --> data:{ <!-- data：定义属性 --> message:'你好'<!-- 如果要是多个属性就用,隔开 --> }, methods:{ <!-- methods 用于定义的函数，可以通过 return 来返回函数值--> fn1:function(){ console.log('你点击了此按钮'); } } }) </script> </body> </html>
效果如下：
可以通过F12调用到控制台，去更改Vue对象的message的值
Vue模板语法：
指令
指令是带有 v- 前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到 DOM 上。
v-html ：有时候我们不希望直接输出<h1>欢迎学习Vue</h1>这样的字符串，而输出被html自己转换的h1的文字，此时可以使用v-html
<div id="box"> <div v-html='message'></div> </div> <script> var box = new Vue({ el:'#box', data:{ message:'<h1>欢迎学习Vue</h1>', }, }) </script>
效果如下：
v-on ：监听DOM v-on:click 也可以写成 @click 后者是其语法糖
举个例子：
<!-- 首先创建一个div盒子他的ID为box --> <div id="box"> <!-- <button v-on:click='add()'>+</button> --> <button @click='add()'>+</button> <!-- 这两种方法都可以 --> <h2>{{count}}</h2> </div> <script> var box = new Vue({ el:'#box', data:{ message:'欢迎学习Vue', count:0, }, methods:{ add:function(){ this.count++ } <!-- 两种写法都可 add(){ this.count++ } --> } }) </script>
效果如下：
v-once：表示该dom元素只渲染一次，之后数据改变，不会再次渲染
举个例子：
<div id="box"> <h2>{{message}}</h2> <div v-once>{{message}}</div> <div v-once>{{message}}</div> </div> <script> var box = new Vue({ el:'#box', data:{ message:'欢迎学习Vue', }, }) </script>
v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
<div id="box"> <p>{{ message }}</p> <input v-model="message"> </div> <script> var box = new Vue({ el: '#box', data: { message: '欢迎学习Vue', }, }) </script>
v-bind ：指令被用来响应地更新 HTML 属性
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
v-bind:title 我们也可以写成:title 后者是其语法糖，其作用当鼠标悬停在某段文字上时会出现提示
感兴趣的可以自己去尝试一下。
v-if：彻底消失
v-show此消失是等于display：none；经常做开销比较大的显示和消失，建议用v-show
<div id="box"> <h2 v-if="seen">seen</h2> <h2 v-show="show">show</h2> </div> <script> var box = new Vue({ el: '#box', data: { seen:true, show:false, }, }) </script>
v-pre：有时候我们期望直接输出{{message}}这样的字符串，而不是被{{}}语法转换的message的变量值，此时我们可以用v-pre标签
<div id="box"> <h1 v-pre>{{message}}</h1> </div> <script> var box = new Vue({ el: '#box', data: { message:'你好' }, }) </script>
效果如下：
v-text：覆盖dom元素中的数据，相当于js的innerHTML方法
<div id="box"> <h1 v-text='p'>{{message}}</h1> </div> <script> var box = new Vue({ el: '#box', data: { message:'你好', p:'我很好' }, }) </script>
Vue.js条件语句：v-if、v-else-if、v-else直接看例子：
<div id="box"> <h2 v-if="age<60">不及格</h2> <h2 v-else-if="age<95">良好</h2> <h2 v-else>优秀</h2> </div> <script> var box = new Vue({ el: '#box', data: { age:88 }, }) </script>
v-for ：可以绑定数据到数组来渲染一个列表
切换栏效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>遍历列表</title> <script src="js/vue.js"></script> <style> ul li{ cursor: pointer; } .active { color: #f00; } </style> </head> <body> <!-- 首先创建一个div盒子他的ID为box --> <div id="box"> <ul> <!-- <li v-for='(item,index) in movies' :key='index' :class="{active:currentIndex === index}" @click="change(index)">{{item}}-------{{index}}</li> --> <!-- <li v-for='(item,index) in movies' :key='index' :class="currentIndex === index?'active':''" @click="change(index)">{{item}}-------{{index}}</li> --> <li v-for="(item,index) in movies" :key="index" :class="getStyle2(index)" @click="change(index)">{{item}}-------{{index}}</li> </ul> </div> <script> var box = new Vue({ el: '#box', data: { movies: [ "海王", "海贼王", "火影忍者", "复仇者联盟" ], currentIndex: 0, }, methods: { change(index) { // this.currentIndex = index if (this.currentIndex === index) return; this.currentIndex = index }, getStyle() { return { active: this.isActive } }, getStyle2(index) { return { active: this.currentIndex === index } } } }) </script> </body> </html>
获取图片以及链接用法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-bind</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style> img{ width: 300px; } </style> </head> <body> <div id="box"> <h2>{{message}}</h2> <img :src="imgURL" alt=""> <a :href="aHerf">百度一下</a> </div> <script> var box = new Vue({ el:'#box', data:{ message:'Hello Vue', aHerf:"https://www.baidu.com", imgURL:"https://desk-fd.zol-img.com.cn/g5/M00/02/00/ChMkJlbKw5aIY6PYAA0XnsktgwEAALG5QPtg4wADRe2915.jpg", }, methods:{ } }) </script> </body> </html>
效果如下：
