Vue的特性
- vue通过数据驱动视图,当数据发生改变时视图也会发生相应变化
- vue可以与html表单进行数据绑定,当表单数据变化时使用vue可以在不操作DOM元素的情况下,获取表单中的数据
MVVM
vue使用MVVM的结构模型,进行数据数据与视图的交互
- M:Model 表示当前页面渲染时所依赖的数据源
- V:View 表示当前页面所渲染的DOM结构
- VM:ViewModel 表示vue实例对象,负责Model和View之间的数据交换
Vue的基本使用
<body>
<!-- 声明一个将要被Vue所控制的DOM区域 -->
<!-- 两个大括号包裹一个data的属性,是Vue中的插值表达式,用来插入具体的内容 -->
<div id="app">{
{username}}</div>
<!-- 通过CDN使用Vue,通过script引入vue.js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建一个Vue实例
const vm = new Vue({
//el 表示Vue要控制的DOM元素,值为一个css选择器,就是View视图区域
el:"#app",
//data 用来驱动视图的具体数据,就是Model数据源
data:{
username:"kiana",
}
})
</script>
</body>
注:el属性对应的选择器选择多个DOM对象时,只会使用第一个匹配的对象作为View区域,但一般默认把一个id为app的div标签当做View视图
Vue指令
Vue通过几个特殊的指令,来进行html与js之间的数据交互
内容渲染指令
- v-text
- { {插值表达式}}
- v-html
<body>
<div id="app">
<!-- v-text指令, 渲染data中的数据-->
<p v-text="username"></p>
<!-- 插值表达式,只是占位符,可以与其他内容同时存在 -->
<p>这是{
{interpolation}}</p>
<!-- v-html指令,可以渲染html标签 -->
<div v-html="info"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
username:"kiana",
interpolation:"插值表达式",
info:"<strong>v-html指令可以渲染html标签</strong>"
}
})
</script>
</body>
属性绑定指令
v-bing指令,将数据绑定给html标签的属性当做属性值,可以简写为冒号(:)
<body>
<div id="app">
<input type="text" v-bind:placeholder="username">
<!-- v-bind绑定属性后属性值中的是js代码 -->
<!-- 直接用字符串赋值 -->
<input type="text" v-bind:placeholder="'德克萨斯'">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
username:"琪亚娜",
}
})
</script>
</body>
事件绑定指令
v-on指令绑定事件,可以简写为@
<body>
<div id="app">
count的值是 {
{count}}
<!-- 通过v-on绑定事件 -->
<button v-on:click="add">点我一下</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
count:0
},
// 事件处理函数写在methods中
methods: {
add:function(){
//通过this关键字可以调用到data中的属性,this代表的数vue实例
this.count++;
}
}
})
</script>
</body>
$event事件对象
<body>
<div id="app">
count的值是{
{count}}
<!-- 通过 函数名(参数) 的方式可以给事件处理函数传参 -->
<button @click="minus(1,$event)">减一</button> <!--使用参数的形式 $event表示事件对象-->
<button @click="add">加一</button> <!-- 不使用参数的形式,默认事件处理函数的唯一参数就是事件对象-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">