vue学习时记录的笔记

1）引入vue的javascript地址

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

一般使用第一种

{{ message }}

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

首先创建一个Vue实例
在实例里面使用el绑定id
data里面创建所展示的数据
也可以使用
v-bind去绑定数据

鼠标悬停几秒钟查看此处动态绑定的提示信息！

var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } })

v-text指令

获取vue的属性值
v-html指令
跟v-text一样，但是如果包含html标签，会将其解析

v-on指令可以用@替代
v-on:后面接触发时间，比如click’，monseenter，dbclick
methods属性后接方法

{{ message }}

反转消息

var app5 = new Vue({
el: ‘#app-5’,
data: {
message: ‘Hello Vue.js!’
},
methods: {
reverseMessage: function () {
this.message = this.message.split(‘’).reverse().join(‘’)
}
}
})

v-model指令
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

v-show指令
根据表达式的真假，切换元素的显示和隐藏

var app=new Vue({
el:“#app”,
data:{
isShow:false,
age:16
}
});

v-if标签

显示

var app=new Vue({
el:“#app”,
data:{
isShow:false,
age:16
}
});
与v-show的区别
v-show是display隐藏元素
而v-if是不使用这个标签代码

v-bind指令
Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，
所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可
。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。
表达式结果的类型除了字符串之外，还可以是对象或数组。
div
class=“static”
v-bind:class=“{ active: isActive, ‘text-danger’: hasError }”

data: {
isActive: true,
hasError: false
}

v-for指令
我们可以用 v-for 指令基于一个数组来渲染一个列表。
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组
，而 item 则是被迭代的数组元素的别名。

• {{ item.message }}

var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })