1，感谢菜鸟教程
2，第一个实例
<html><head><meta charset="utf-8"><title>Vue 测试实例 </title><script src="https://unpkg.com/vue/dist/vue.js"></script></head><body><div id="app"> ?<p>{{ message }}</p></div><script>new Vue({ ???//new一个实例， ?el: ‘#app‘, ???//选择id等于app的元素 ?data: { ???message: ‘Hello Vue.js!‘ ???//元素的内容是：xxx ?}})</script></body></html>3，看vue.js的数据结构
<head> ???<meta charset="utf-8"> ???<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> ???<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body> ???<div id="vue_det"> ???????<h1>site : {{site}}</h1> ???//注意此时的site用了两个大括号 ???????<h1>url : {{url}}</h1> ???????<h1>{{details()}}</h1> ???</div> ???<script type="text/javascript"> ???????var vm = new Vue({ ???????????el: ‘#vue_det‘, ???????????data: { ???//data是一个对象，用于定义属性，注意vue内部的data变化，html的内容也会变化 ???????????????site: "菜鸟教程", ???????????????url: "www.runoob.com", ???????????????alexa: "10000" ???????????}, ???????????methods: { ???//用于定义函数 ???????????????details: function() { ???????????????????return ?this.site + " - 学的不仅是技术，更是梦想！"; ???//this.site指的就是data里的site ???????????????} ???????????} ???????}) ???</script></body>data和dom中的内容是同步的：
<head> ???<meta charset="utf-8"> ???<title>Vue 测试实例</title> ???<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body> ???<div id="vue_det"> ???????<h1>site : {{site}}</h1> ???</div> ???<script type="text/javascript"> ???// 我们的数据对象 ???var data = { site: "菜鸟教程"} ???//原本是“菜鸟教程” ???var vm = new Vue({ ???????el: ‘#vue_det‘, ???????data: data ???}) ???vm.site = "Runoob" ???document.write(data.site + "<br>") // Runoob ???data.site = "hehe" ???document.write(vm.site + "<br>") // hehe ???</script></body>4，Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。简言之就是它很底层很快。
我们的插值{{}}可以有如下用法：
a,插入文本，上面的例子就是插入了文本
b,插入html元素：
<body><div id="app"> ???<div v-html="message"></div> ???//插值写入以后相当于是这样的结构：<div v-html="message"><h1>菜鸟教程</h1></div></div> ???<script>new Vue({ ?el: ‘#app‘, ?data: { ???message: ‘<h1>菜鸟教程</h1>‘ ?}})</script></body>c,属性：
<div v-bind:class="{active: isActive}"></div>，比如如果 这里 isActive 的值为 true 则会被渲染成 class=‘active‘ 如果为 false , 则 不会存在。
<style>.class1{ ?background: #444; ?color: #eee;}</style><body><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><div id="app"> ?<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"> ???//据说v-model是双向的，而v-bind是单向的，选中了以后，data.use的值估计会变成true，然后v-bind的class就成了具有class1属性 ?<br><br> ?<div v-bind:class="{‘class1‘: use}"> ???//如果use的值为true，那就会被渲染成这个div的class=class1，至于为什么没有套上两层大括号，估计是约定俗成 ???v-bind:class 指令 ?</div></div><script>new Vue({ ???el: ‘#app‘, ?data:{ ?????use: false ?}});</script></body>d,表达式
vuejs在html页面上可以直接运算的，相当于直接在元素内写程序了
<div id="app"> ???{{5+5}}<br> ???//10 ???{{ ok ? ‘YES‘ : ‘NO‘ }}<br> ???//yes ???{{ message.split(‘‘).reverse().join(‘‘) }} ???//gniad ???<div v-bind:id="‘list-‘ + id">啦啦啦</div> ???//这个div具有list-1的id属性</div><script>new Vue({ ?el: ‘#app‘, ?data: { ???ok: true, ???message: ‘daqing‘, ???id : 1 ?}})</script>e，指令
带有v-前缀的是特殊属性，比如v-if表示是否插入这个元素，true表示是。
<div id="app"> ???<p v-if="seen">现在你看到我了</p> ??//seen是false的话看不到p元素 ???<template v-if="ok"> ???//template是模板元素，但是具体内容不知 ?????<h1>daqing</h1> ?????<p>学的不仅是技术，更是梦想！</p> ?????<p>哈哈哈，打字辛苦啊！！！</p> ???</template></div> ???<script>new Vue({ ?el: ‘#app‘, ?data: { ???seen: true, ??????ok: true ?}})</script>f,参数
<div id="app"><pre><a v-bind:href="url">菜鸟教程</a></pre> ???//v-bind后面‘url‘是从data.url里同步过来的哦，在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。</div><script>new Vue({el: ‘#app‘,data: {url: ‘http://www.runoob.com‘}})</script>另外， v-on 指令也可以关注一下，它是监听事件：<a v-on:click="doSomething">
g,用户输入
<div id="app"> ???<p>{{ message }}</p> ???<input v-model="message"> ???//这里会把用户输入当成message传到data中，然后再通过插值放到p元素中</div><script>new Vue({ ?el: ‘#app‘, ?data: { ???message: ‘Runoob!‘ ?}})</script>v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定
h，监听事件
<div id="app"> ???<p>{{ message }}</p> ???//此处同步的是data.message的值 ???<button v-on:click="reverseMessage">反转字符串</button> ???//此处不可用onclick=“function”这样的写法，因为reverseMessage不是一个function，而是约等于一个类方法</div> ???<script>new Vue({ ?el: ‘#app‘, ?data: { ???message: ‘Runoob!‘ ?}, ?methods: { ???reverseMessage: function () { ?????this.message = this.message.split(‘‘).reverse().join(‘‘) ???} ?}})</script>l,过滤
<div id="app"> ?{{ message | capitalize }} ???//使用capitalize对前面的message进行过滤，中间隔着管道符号</div> ???<script>new Vue({ ?el: ‘#app‘, ?data: { ???message: ‘runoob‘ ?}, ?filters: { ???//此处定义的是过滤器 ???capitalize: function (value) { ???//value是管道前面的值，这个过滤函数的作用是首字母大写 ?????if (!value) return ‘‘ ?????value = value.toString() ?????return value.charAt(0).toUpperCase() + value.slice(1) ???} ?}})</script>m,缩写：
常用缩写：
<a v-bind:href="url"></a> 缩写为：<a :href="url"></a>
<a v-on:click="doSomething"></a>缩写为：<a @click="doSomething"></a>
5，条件语句
v-if指令：
<div id="app"><p v-if="seen">现在你看到我了</p><template v-if="ok"><h1>菜鸟教程</h1><p>学的不仅是技术，更是梦想！</p><p>哈哈哈，打字辛苦啊！！！</p></template></div><script>new Vue({el: ‘#app‘,data: {seen: true,ok: true}})</script>if和else
<div id="app"> ???<div v-if="Math.random() > 0.5"> ?????显示if的div ???</div> ???<div v-else> ?????显示else的div ???</div></div> ???<script>new Vue({ ?el: ‘#app‘})</script>if...else if...else...
<div id="app"> ???<div v-if="type === ‘A‘"> ?????A ???</div> ???<div v-else-if="type === ‘B‘"> ?????B ???</div> ???<div v-else-if="type === ‘C‘"> ?????C ???</div> ???<div v-else> ?????Not A/B/C ???</div></div> ???<script>new Vue({ ?el: ‘#app‘, ?data: { ???type: ‘B‘ ???//type是哪个显示哪个div
?}})</script>v-show为true就显示div，为false就不显示
<div id="app"> ???<h1 v-show="ok">Hello!</h1></div> ???<script>new Vue({ ?el: ‘#app‘, ?data: { ???ok: true ?}})</script>6，循环语句
v-for表示循环：循环data里的内容
<div id="app"> ?<ol> ???<li v-for="i in sites"> ???//注意这个语法 ?????{{ i.name }} ???</li> ?</ol></div><script>new Vue({ ?el: ‘#app‘, ?data: { ???sites: [ ?????{ name: ‘Runoob111‘ }, ???//对应的html中会生成3个li ?????{ name: ‘Google‘ }, ?????{ name: ‘Taobao‘ } ???] ?}})</script>迭代对象：
<div id="app"> ?<ul> ???<li v-for="(value, key) in object"> ???//注意哦，此处的object在data内部 ???{{ key }} : {{ value }} ???//value和key都会打印出来，很像class ???</li> ?</ul></div><script>new Vue({ ?el: ‘#app‘, ?data: { ???object: { ?????name: ‘菜鸟教程‘, ?????url: ‘http://www.runoob.com‘, ?????slogan: ‘学的不仅是技术，更是梦想！‘ ???} ?}})</script>迭代整数：
<div id="app"> ?<ul> ???<li v-for="n in 10"> ???//返回1到10（包括10） ????{{ n }} ???</li> ?</ul></div>7，计算属性
直接在插值中写运算代码：
<div id="app"> ?{{ message.split(‘‘).reverse().join(‘‘) }} ???//反转字符串</div><script>new Vue({ ?el: ‘#app‘, ?data: { ???message: ‘Runoob!‘ ?}})但是也可以通过computed属性来写：
<div id="app"> ?<p>原始字符串: {{ message }}</p> ?<p>计算后反转字符串: {{ reversedMessage }}</p> ??//指向的是computed里的function</div> <script>var vm = new Vue({ ?el: ‘#app‘, ?data: { ???message: ‘Runoob!‘ ?}, ?computed: { ???// 计算属性的 getter ???reversedMessage: function () { ?????// `this` 指向 vm 实例 ?????return this.message.split(‘‘).reverse().join(‘‘) ???} ?}})</script>computed属性和method方法：
效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。性能上来说的话computed会更好一点
<div id="app"> ?<p>原始字符串: {{ message }}</p> ?<p>计算后反转字符串: {{ reversedMessage }}</p> ?<p>使用方法后反转字符串: {{ reversedMessage2() }}</p></div><script>var vm = new Vue({ ?el: ‘#app‘, ?data: { ???message: ‘Runoob!‘ ?}, ?computed: { ???// 计算属性的 getter ???reversedMessage: function () { ?????// `this` 指向 vm 实例 ?????return this.message.split(‘‘).reverse().join(‘‘) ???} ?}, ?methods: { ???reversedMessage2: function () { ?????return this.message.split(‘‘).reverse().join(‘‘) ???} ?}})</script>vue.js基础
原文地址：https://www.cnblogs.com/0-lingdu/p/10236166.html