Vue之小入门
<div id="app">{{ greeting }}</div>
<script>
let oDiv = document.getElementById('app');
oDiv.innerText = 'Hello World';
</script>
代码执行结果：
使用Vue实现上个实例的功能：
<script src='./static/vue.min.js'></script>
<div id="app">{{ greeting }}</div> <script> new Vue({ el: '#app', data: { greeting: 'Hello Vue', } }) </script>
代码打印结果：
v-text
<script src="./static/vue.min.js"></script>
<body>
<div id="app" v-text="greeting"></div>
<script>
// 数据模板引擎
// v-开头的指令是帮助我们渲染数据用的
new Vue({
el: '#app',
data: {
greeting: 'Hello Vue',
}
})
</script>
</body>
代码打印结果：
v-html
<script src="./static/vue.min.js"></script>
<body>
<div id="app" v-html="greeting"></div>
<script>
new Vue({
el: '#app',
data: {
greeting: '<h1>Hello Vue</h1>'
}
})
</script>
</body>
代码打印结果：
v-for
<script src="./static/vue.min.js"></script>
<body>
<div id="app">
<ul>
<li v-for="aihao in xxoo">{{aihao}}</li>
</ul>
<ul>
<li v-for="student in students">
姓名：{{student.name}},
年龄：{{student.age}},
爱好：{{student.hobby}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
xxoo: ['吃', '喝', '嫖', '赌'],
students: [
{
name: '龙达',
age: 18,
hobby: 'girl',
},
{
name: '小默',
age: 19,
hobby: 'younggirl',
},
{
name: '小小默',
age: 20,
hobby: 'she',
}
]
}
})
</script>
</body>
打印结果：
v-if / v-else-if / v - else
<script src="./static/vue.min.js"></script>
<body>
<div id="app">
<div v-if="role == 'LongDa'">
<h1>男宾一位！！！</h1>
</div>
<div v-else-if="role == 'XiaoXiaoMo'">
<h1>男宾两位！！！</h1>
</div>
<div v-else>
<h1>滚！！！</h1>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
role: 'LongDa',
}
})
</script>
</body>
打印结果：
v-show
<script src="./static/vue.min.js"></script>
<body>
<div id="app">
<div v-show="isShow">Hello Vue</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
isShow: false,
}
})
</script>
</body>
具体实现原理是将div标签的display属性值设置为none。
v-bind
<script src="./static/vue.min.js"></script>
<style>
.active {
500px;
height: 500px;
background-color: lawngreen;
}
</style>
<body>
<div id="app">
<a v-bind:href="jingdong">去京东</a>
<div :class="[isActive]"></div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
jingdong: 'https://www.jd.com',
isActive: 'active',
}
})
</script>
</body>
打印结果：
v-bind可以省略，直接写：class=['xxoo']
0省略，