vue基础(总结很详细)
<script type="text/javascript" src="vue.js"></script>
<div id="box"> //确定一个范围,表示此范围内部都是 vue解析出来的
<h1> {{ msg }} </h1>
</div>
var vm = new Vue({
el: '#box', // el:‘选择器’
data: {
msg: 'hello, world!'
},
// 实例中,可以设置很多配置项
});
<div id="wzy">
<p>{{obj.name}}</p>
</div>
<script>
new Vue({
el: '#wzy',
data: {
message: 'hello world',
obj:{ //插入json数据
name:'tom',
age:20
}
}
})
</script>
<div id="wzy">
<p v-if="isShow">表达式的值为真,我就能显示</p>
</div>
var app3 = new Vue({
el: '#wzy',
data: {
isShow: true
}
})
<body>
<div id="wzy">
<h1 v-if="isShow">表达式的值为真,我就能显示</h1>
<h1 v-else>v-if不成立的时候,我就显示出来了</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#wzy',
data: {
isShow: false
}
})
</script>
<div class="div1" v-show='isShow'></div>
<button v-on:click='fn()'>toggle</button>
//v-on: 可以简写成 @
<button @click='fn()'>toggle</button>
<body>
<div id="wzy">
<a v-on:click="show()">点击测试</a>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#wzy',
data: {
},
methods: {
show:function(){
alert("测试");
}
}
})
</script>
<style type="text/css">
.div1 {
width: 100px;
height: 100px;
background: red;
margin-top: 20px;
}
</style>
<body>
<!-- view -->
<div id="box">
<!--第一种:click事件直接绑定一个方法,没有参数情况下,方法后面的括号可以去掉-->
<!-- <button v-on:click='fn()'>toggle</button> -->
<button v-on:click='fn'>toggle</button>
<!-- v-on: 可以简写成 @ -->
<!-- <button @click='fn()'>toggle</button> -->
<br/>
<div class="div1" v-show='bol'></div>
<!--第二种:传参情况下,click事件使用内联语句-->
<button v-on:click="say('Hi')">Hi</button>
</div>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
// 实例化对象
var vm = new Vue({
el: '#box',
data: {
// 数据
bol: false
},
// 事件统一写在methods里面
methods: {
fn: function() {
this.bol = !this.bol;
},
say: function(msg) {
alert(msg);
}
}
});
</script>
<body>
<div id="box">
<input type="text" v-model='msg'></input>
<h1>{{ msg }}</h1>
<!--
v-model:进行双向绑定的(把用户输入的内容,同步显示在页面上)
语法:v-model='变量'
注:使用在表单元素上(常用在 type类型为text 上)
-->
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
msg: 'hello'
}
});
</script>
7.6 v-bind 指令
<div id="box">
<!-- 第一种:图片的url地址 -->
<img v-bind:src="imageSrc">
<!-- 第二种:动态类名 v-bind:class={类名:表达式} -->
<div v-bind:class="{ divclass: isRed }"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
// 第一种:图片地址
imageSrc: "images/1.png",
// 第二种:class类名
isRed: true
}
});
</script>
<body>
<div id="app">
<ul>
<!-- 1、遍历对象
value :表示对象的属性值
key :当前对象的属性名
index:当前对象的索引值
-->
<!-- <li v-for="(value, key, index) in person">
{{index}} - {{key}} - {{value}}
<br>
</li> -->
<!-- 2、遍历数组
item: 代表遍历的每一个数组对象
index:当前数组对象的索引值
-->
<!-- <li v-for="(item,index) in lesson">
{{index}} - {{item.name}} - {{item.type}}
<br>
</li> -->
<!-- 3、双层嵌套
把课程中内容遍历出来
-->
<!-- <li v-for="(item,index) in lesson">
<span v-for="(childValue,index) in item.type">
{{index}} - {{childValue}} <br>
</span>
</li> -->
<!-- 4、key 属性 :更高效的去重用和重新排序现有元素
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每
项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。
建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单
key的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值 ,这里使用简写形式完成
-->
<li v-for="(item,index) in lesson" :key="index">
<!-- 这的 index是 唯一的存在,可以使用,如果有其他的也可以使用 -->
{{index}} - {{item.name}} - {{item.type}}
<br>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
person: {
name: 'zfpx',
age: 7,
},
lesson: [
{ name: '前端三大块', type: ['HTML', 'CSS', 'JavaScript'] },
{ name: '前端三大框架', type: ['vuejs', 'react', 'angularjs'] },
]
}
});
</script>
原文地址:https://blog.csdn.net/m0_63233901/article/details/142817028
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!