数据驱动概念
vue是mvvm模型设计,传统如jquery是直接操作dom对象,而vue是操作数据,数据驱动文档对象,最后再渲染页面。
vue组件
.vue的文件就是一个vue组件,有三个部分组成,新创建的vue项目中的App.vue就是一个项目的根组件。
#模版
<template>
</template>
#脚本
<script>
</script>
#样式
<style>
</style>
组件模板语法
修改App.vue
<template>
<!-- 只能有一个根节点 -->
<div id="app">
<!-- {{}}表达式 -->
<h1>{{str}}</h1>
</div>
</template>
<script>
// 固定写法
export default {
// 数据定义
data(){
return {
str:'你好vue'
}
}
}
</script>
// 样式
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
效果页面
{{}}表达式
展示输出数据
计算属性compute
当需要对属性的值做比较复杂的计算时,可以使用computed计算
<template>
<!-- 只能有一个根节点 -->
<div id="app">
<h1>{{str}}</h1>
<h1>{{revertstr}}</h1>
</div>
</template>
<script>
// 固定写法
export default {
// 数据定义
data(){
return {
str:'你好vue'
}
},
computed:{
revertstr(){
return this.str.split("").reverse().join("") ;
}
}
}
</script>
// 样式
<style>
</style>