day13-Vue&Element
建议看官网文档
Vue
- Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
- 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
Vue快速入门（建议看官网文档）
实例
<div id="app">
<input v-model="username">
<!--插值表达式-->
{{ username }}
</div>
<script src="js/vue.js" ></script>
<script>
//创建vue核心对象
var app = new Vue({
el: '#app',
data: {
username: 'Hello Vue!'
}
})
</script>
vue常用指令
- 指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。
- 例如:
v-if，v-for..
常用指令
v-bind & v-model
实例（v-bind & v-model）（引入vue.js用官网版本）
<body>
<div id="app">
<a v-bind:href="url">来点击一下</a>
<a :href="url">来点击一下2</a>
<input v-model="url">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--<script src="js/vue.js" ></script>-->
<script>
//创建vue核心对象
const app = new Vue({
el: '#app',
data: {
// username: '',
url:"https://www.baidu.com",
}
})
</script>
</body>
v-on
实例（v-on）（引入vue.js用官网版本）
<body>
<div id="app">
<input type="button" value="小按钮" v-on:click="show()">
<input type="button" value="小按钮" @click="show()">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--<script src="js/vue.js" ></script>-->
<script>
//创建vue核心对象
const app = new Vue({
el: '#app',
data: {
// username: '',
url:"https://www.baidu.com",
},
methods:{
show(){
alert("我被点了");
}
}
})
</script>
</body>
v-if & v-show
实例1（v-if & v-show）（引入vue.js用官网版本）
<body>
<div id="app">
<div v-if="count == 3">1</div>
<div v-else-if="count == 4">2</div>
<div v-else>3</div>
<hr>
<div v-show="count == 3"> v-show</div>
<br>
<input v-model="count">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--<script src="js/vue.js" ></script>-->
<script>
//创建vue核心对象
const app = new Vue({
el: '#app',
data: {
// username: '',
url:"https://www.baidu.com",
count:3
},
methods:{
show(){
alert("我被点了");
}
}
})
</script>
</body>
v-for
实例2（v-for）（引入vue.js用官网版本）
<body>
<div id="app">
<div v-for="addr in addrs">
{{addr}} <br>
</div>
<hr>
<div v-for="(addr,i) in addrs">
{{i+1}}--{{addr}} <br>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--<script src="js/vue.js" ></script>-->
<script>
//创建vue核心对象
const app = new Vue({
el: '#app',
data: {
// username: '',
url:"https://www.baidu.com",
count:3,
addrs:["xx","ss","ssssss"]
},
methods:{
show(){
alert("我被点了");
}
}
})
</script>
</body>
vue生命周期
- 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。
- 发送异步请求，加载数据
mounted示例
实例（mounted）
<script>
//创建vue核心对象
const app = new Vue({
el: '#app',
data: {
// username: '',
url:"https://www.baidu.com",
count:3,
addrs:["xx","ss","ssssss"]
},
methods:{
show(){
alert("我被点了");
}
},
mounted(){
alert("加载完成")
}
})
Comments | NOTHING