一，什么是vue
vue是一款渐进式的JavaScript框架（就是可以根据需求来引入功能，而不是一次性全部引入）
2013年7月,一位叫尤雨溪的开发者在github上首次提交
vue最独特的特性就是变化侦测，也就是当你修改数据时，视图会进行更新
二，使用
2.1引入
<script src="https://unpkg.com/vue@next"></script>
第一步就是创建vue实例并挂载到想要变化侦测的盒模型中.mount()
Vue.createApp().mount("#app")
第二步数据选项,在data这个函数中写数据并可以同步在页面中
Vue.createApp({
//数据
data(){
return {
msg:"你好vue"
}
}
}).mount("#app")
在页面中使用data里面的数据用{{}}这样的插值写法来展示数据
<div id="app">
{{msg}}
</div>
例
当然双大括号也可以说是js表达式,可以解析一些计算+-*/等等
<p>{{10+2}}</p>
运算
<div>
{{html}}
</div>
html:"<h1>哈哈哈哈哈哈哈哈哈哈</h1>"
不解析html标签
html
下面就介绍指令
三,指令
3.1v-html 解析html标签
<div v-html="html">
</div>
v-html
3.2 v-if和v-else
<div id="app">
<p v-if="flag">显示</p>
<p v-else>隐藏</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
//数据
data(){
return {
flag:false
}
}
}).mount("#app")
v-else
v-else只会向上早离自己最近的v-if,中间不可以有其他标签
3.3v-show 控制显示和隐藏
v-show 和 v-if的区别就是,v-show是在元素上加display-"none",这一属性,而v-if是不会让他进入html结构中
<div id="app">
<p v-show="flag">显示</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
//数据
data(){
return {
flag:false
}
}
}).mount("#app")
例
所以当我们页面切换频繁的时候,就用v-show,因为减少了DOM操作负担
3.4 v-bind;当标签属性的值需要动态变化时
<div id="app">
<a v-bind:href="url">跳转百度</a>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
//数据
data(){
return {
url:"https://www.baidu.com/"
}
}
}).mount("#app")
v-bind也可以简写为:的形式
v-bind常用于类名间切换样式等等
也可以两种类名同时使用
.box{
width: 100px;
height: 100px;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="`box ${s}`">
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
//数据
data(){
return {
s:"red"
}
v-bind
数组形式的多种绑定
<div :class="[redClass,activeClass]"></div>
<!--
数据
{
redClass : "red",
activeClass : "active"
}
渲染为
<div class="red active"></div>
绑定标签属性,如我们可以动态的改变盒子的高度宽度
<div class="box" :style="{
width:w+'px'
}">
</div>
data(){
return {
w:600
}
}
style
网友评论