vue简介
Vue.js是一套构建用户界面的渐进式框架，Vue 采用自底向上增量开发的设计。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。
参考文档 https://cn.vuejs.org/v2/guide/index.html
一.示例
<body>
<div id="app">
<!-- 文本插值 -->
<h3>{{msg}}</h3>
<div>
<!-- v- 开头的的指令系统 --->
<!-- v-bind 将attribute title 与 "msg"进行绑定-->
<h3 v-bind:title="msg">鼠标悬停显示hello world</h3>
</div>
<div>
<!-- v-if 条件判定，为真进行显示，为假则不显示 -->
<h3 v-if = "show"> 是否显示hello</h3>
</div>
<div>
<!-- v-on 绑定了一个事件，点击button进行是否显示的切换 -->
<button v-on:click = "clickFun">切换</button>
</div>
</div>
<script src="vue.js"> </script>
<script >
var app = new Vue({ // 使用时创建 vue对象
el:"#app", // el, 固定写法，类似选择器，绑在id为app的html 中div标签上
data:{ // data 固定写法,后跟{}
msg:"hello world",
show:true
},
methods:{ // method:{} 固定写法
clickFun:function(){
console.log(this);
this.show = !this.show
}
}
})
console.log(app.$el);
console.log(app.$data.msg);
console.log(app.msg);
</script>
</body>
二.vue实例
<div id="app">
<h1>{{count}}</h1>
<h2>{{count2}}</h2>
</div>
<script>
var app = new Vue({
//创建vue实例，Vue应用都是通过用创建一个新的 Vue实例开始的
el:"#app" // 与对应的html元素进行绑定
data:{}; //固定写法，后跟一个data对象，当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
})
// 打印 el
console.log(app.$el)
conslog.log(document.getElementById("app"))
/**
打印结果如下，两者等同:
<div id="app">0</div>
*/
// 获取data对象中count的值,vue实例属性等调用使用$
console.log(app.$data.count)
// 直接打印vue实例app
console.log(app)
/**输出结果如下
Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
...
$vnode: undefined
count: 0
...
*/
//从结果中可以看到count就在实例中，所以也可以如下获取data对象中的数据
console.log(app.count);
//只有当实例被创建时就已经存在于 data 中的属性才是响应式的,这些数据改变，会触发视图改变。后期新添加进入data的属性，则不会触发view的改变,如下所示
app.$data.count2 = 1
/**
在div标签中，通过{{count2}}文本插值，会发生错误:
[Vue warn]: Property or method "count2" is not defined on the instance but referenced during render...
*/
</script>
三.模板
3.1文本插值
常用语法{{ }}
<div id="app">
<h1>title {{title}} </h1> <!--双大括号解释的内容为文本 -->
</div>
...
<script>
var app = new Vue({
el:"#app",
data:{
title:"Vue 示例"
}
})
</script>
3.2 解释Html代码 v-html
<div id="app" v-html = "title">
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
title:"<h1>Vue示例</h1>"
}
})
</script>
<!-- 渲染结果 -->
<!--
<div id="app"><h1>Vue示例</h1></div>
-->
注:只解释可信html代码
3.3 {{}} 支持js表达式
<div id="app">
<h1>{{ is_ative ? "Vue示例1" : "Vue示例2" }}</h1>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
is_ative:false
}
})
</script>
四.指令系统
以 v- 开头的都是指令
4.1 v-bind
v-bind 指令可以用于响应式地更新 HTML attribute：
- 示例1 给div的title传递值：
<!--给div标签的title传递值 -->
<div v-bind: title='hello world'>hello world</div>
<!--简写 -->
<div :title>hello world </div>
- 示例2 给div class传递一个对象：
<div id="app" class="c1" v-bind:class="{ c2: isActive }" >
</div>
<script src="vue.js"></script>
<script>
//c2 是否显示取决于 isActive是否为true
var app = new Vue({
el:'#app',
data:{
isActive:true
}
})
</script>
<!--渲染结果 -->
<!-- <div id="app" class="c1 c2"></div> -->
- 示例3 也可以这样绑定
<div id="app" class='c1' :class="class_obj"></div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
class_obj:{
active: true,
has_err:false
}
}
})
</script>
<!-- 渲染结果 -->
<!-- <div id="app" class="c1 active"></div> -->
- 示例4 数组传递方式
<div id="app" class='c1' :class="[isAct_class, has_err_class]"></div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
isAct_class:'active',
has_err_class: 'has_err'
}
})
</script>
<!-- 渲染结果 -->
<!-- <div id="app" class="c1 active has_err"></div> -->
4.2 v-if
用于条件性地渲染一块内容, 返回为真的内容
<div id="app">
<h1 v-if = "is_active">Vue示例1</h1>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
is_active:true
}
})
</script>
v-else 配合 v-if使用，相当于控制语句中的if --else
<div id="app">
<h1 v-if = "is_active">Vue示例1</h1>
<h1 v-else>Vue示例2</h1>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
is_active:false
}
})
</script>
template 元素标签上使用v-if，渲染时不会显示
<div id="app">
<template v-if="ok">
<h1>A</h1>
<h2>B</h2>
<h3>C</h3>
</template>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
ok:true
}
})
</script>
<!--渲染结果
<div id="app">
<h1>A</h1>
<h2>B</h2>
<h3>C</h3>
</div>
-->