vue.js是一个JavaScript MVVM(Model-View-ViewModel)库,由数据驱动和组件化的思想构建。
Vue.js的使用
- List item
<div id="app">
{{ message }}
</div>
- 定义model
<script src="js/vue.js"></script>
<script>
var exampleData={message: "hello world!"}
</script>
- 创建一个vue实例或viewmodel,用于连接view与model
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app", //讲实例挂载到app
data: exampleData
})
</script>
- vue双向绑定–v-model:值修改互相影响
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
Vue.js常用指令
- v-if=“expression”,条件渲染指令:根据表达式的真假删除和插入元素可搭配v-else,v-else-if(每个vue实例都会代理其选项对象中的data属性,所以可以直接访问)
- v-show=“expression”,条件渲染指令:根据表达式的真假设置style属性搭配v-else,v-show为真仍会执行v-else
- v-for=“item in items” / (item, key) in items:遍历数组
- v-bind: argument=“expression”:参数多为HTML元素特性,例如:class
vue提供了缩写方式 : - v-on:click=“function”:监听DOM事件,绑定方法或使用内联语句
vue提供了缩写方式 @
Vue.js计算属性
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</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依赖于缓存,只有相关依赖改变才会改变,可以用methods代替,重新渲染会再次调用
过滤器
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
<script>
new Vue({
el:,
data:,
methods:{},
filters:{capitalize : function (value){}}
})
</script>
其他
vue提供了有用的实例属性与方法,用$前缀与自定义变量区分
项目相关
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
watch:{} 监听值的变化,执行相应操作
父组件向子组件通信:
props:{} 子组件访问父组件的唯一接口
ref:元素或子组件注册引用信息,引用信息将会注册在父组件的
r
e
f
s
对
象
上
,
主
要
用
于
调
用
子
组
件
的
属
性
与
方
法
父
组
件
:
<
c
h
i
l
d
r
e
f
=
"
m
s
g
"
>
<
/
c
h
i
l
d
>
t
h
i
s
.
refs对象上,主要用于调用子组件的属性与方法 父组件:<child ref="msg"></child> this.
refs对象上,主要用于调用子组件的属性与方法父组件:<childref="msg"></child>this.refs.msg.getMessage()
子组件向父组件通信:
this.
e
m
i
t
(
e
v
e
n
t
,
a
g
r
s
)
:
子
组
件
传
参
于
父
组
件
父
组
件
调
用
:
e
v
e
n
t
对
应
函
数
名
(
a
r
g
s
)
调
用
父
组
件
函
数
:
t
h
i
s
.
emit(event, agrs):子组件传参于父组件 父组件调用:event对应函数名(args) 调用父组件函数:this.
emit(event,agrs):子组件传参于父组件父组件调用:event对应函数名(args)调用父组件函数:this.parent.function
监听内部属性变动
watch: {
'userinfo.agency_id': {
handler(n_data, o_data){
if( n_data.agency_id !=0 ){
this.is_admin = false
}else{
this.is_admin = true
}
}
},
deep: true, //深度监听
immediate: true //第一次绑定也执行函数
}
主要文件结构
router/index.js:连接路由与组件
index.html:首页入口文件
main.js:核心文件,替换index.html文件中div:app为组件(App.vue)中的模板template
App.vue:router-view由vue-router去渲染组件,讲结果挂载到这个div上
router/index.js:连接路由与组件
部署
Nginx部署,页面刷新404问题,修改配置文件如下:
location / {
root /opt/macau/frontend/dist/;
index index.html index.htm;
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}