正文

vue.js基础

IP云
IP云V管理员/5 阅读
08/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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> //
{{ 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>