国内前端框架
特点一:可以把我们的界面划分成多个部分,把这些组件组成在一起,类似于拼图
二:支持双向绑定
vue官方文档:https://cn.vuejs.org/v2/guide/
引入js文件,可直接创建vue项目
响应式处理
调出控制台 在控制台里对象名.数据名 可直接更改值
for循环
函数绑定
<button v-on:click="f1">点击下</button>
methods:{//函数绑定
f1:function(){
alert("hello")
}
}
双向绑定
<input type="text" v-model="value" />
<p>用户输入的值是:{{value}}</p>
data里也要有value的空值 当输入框里的值发生更改 获取展示的值也会改变
组件化应用构建
<body>
//组件调用
<c1></c1>
</body>
Vue.component('c1', { //定义组件 c1:组件名称
template: '<h1>这里是一个组件</h1>' //template:html中的代码 模板
})
如何去更改组件里的值不是固定的
vue实例,也可以理解为一个对象
MVVM :model view v-model
vue v = new Vue({
beforeCreate(){
console.log("创建前")
},
created(){
console.log("创建后")
}
})
后期需要和springboot项目进行结合
绑定标签中的属性
<style>.h1{font-size:10px}</style>
<h1 v-bind:class="className">绑定标签中得属性</h1>
data:{
className:"h1"
}
v-bind增加代码量,vue缩写
<!--v-bind缩写-->
<c1 :c_value="str"></c1>
<h1 :class="className">绑定标签中的属性</h1>
<button @click="f1">点击下</button>
``