vue初级快速入门
vue介绍
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
官网:vue官网上面有vue.js的下载 还有教学视频 但是代码没注释 讲的又很快 不适合后端新手入门 我下面会写的非常详细 适合新手掌握vue
vue快速入门
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}} //这个叫做插值表达式
</div>
</body>
<script>
new Vue({
el:'#app',//表示当前vue对象接管了div区域
data:{
message:'这里输入的内容就是给上面的message赋的值'//注意不要写分号结尾
}
})
</script>
</html>
vue常用系统指令
ps:指令由很多,这里我就总结一下我觉得最基本且必须要掌握的指令,后面的代码就省去HTML的头和js的导入.
1.v-on (可以简写为@)
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
<body>
<div id="app">
{{message}}
<button v-on:click="fun('这是使用vue绑定的点击事件')">vue的onclick</button>//v-on:click 可以简写为@click
</div>
</body>
<script>
//view model
let vue = new Vue({//let vue可以写成Var vue ,let是JavaScript6版本以后推荐使用的
el:'#app',
data:{
message:'点我'
},
methods:{
fun:function(msg){
vue.message = msg;
//上面如果不写let vue 的话 这边可以写为this.message=msg
}
}
})
</script>
2.v-bind(可以简写为:)
插值语法不能作用在 HTML 标签里面的特性上，遇到这种情况应该使用 v-bind指令.
<body>
<div id="app">
<font v-bind:color="color1">请你支持我!</font>
<font :color="color2">你的支持是我更新的动力!</font> //v-bind:color可以简化成:color
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
color1:"red",
color2:"blue"
}
})
</script>
3.v-text和v-html
这个标签比较简单,不算常用,但我觉得你应该知道,简单来说v-html会解析HTML语法,而v-text就是普通文本了
<body>
<div id="app">
<div v-html="message"></div> //页面输出为 helloworld
<div v-text="message"></div> //页面输出为<h1>helloworld</h1>
</div>
</body>
<script>
//view model
new Vue({
el:'#app',
data:{
message:"<h1>helloworld</h1>"
}
})
</script>
4.v-model(vue最重要标签 没有之一)
ps:划重点,注意了!!!
Vue.js 遵循了 MVVM(Model-View-ViewModel)的思想,MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）,Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。(好像有点抽象,那就看下面代码吧)
<body>
<div id="app">
姓名:<input type="text" id="username" v-model="user.username"><br>
密码:<input type="password" id="password" v-model="user.password"><br>
<input type="button" @click="fun" value="获取">
</div>
<script>
new Vue({ el:'#app', //表示当前vue对象接管了div区域
data:{
user:{username:"zhangsan",password:"123"}
},
methods:{
fun:function(){
alert(this.user.username+" "+this.user.password);
this.user.username="tom"; this.user.password="11111111"; }
}
});
</script>
</body>
//总结:我们一般的数据绑定 就是给插值表达式的变量赋值,是单向的,而v-model实现了mvvm模式中的vm,即双向数据绑定,这是什么意思呢?简单来说,一开始我们在data中绑定了插值表达式的值,页面也显示了出来,后来我们在页面中重新赋值,插值表达式的值就变了,这就是双向绑定的伟大之处.
5.v-if和v-show
表面上效果相同 但是简单来说当值为false时 v-show是将渲染效果隐藏 v-if是不渲染
<body>
<div id="app">
<span v-if="flag">安妮</span>
<span v-show="flag">亚索</span>
<button @click="fun">切换</button>
</div>
</body>
<script>
//view model
let f =new Vue({
el:'#app',
data:{
flag:'true'
},
methods:{
fun:function(){
f.flag = !f.flag
}
}
})
</script>
上一篇： javascript 面向对象思想 附源码_js面向对象
下一篇： php的数学题