Vue的介绍
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单
vue是一个渐进式框架,让前端开发人员从dom操作解放出来,变为操纵数据即可,然后dom的操作Vue内部帮我们实现了,用了Vue之后不建议再去人为的操作dom。那下面说说Vue的一些基本指令
先来用npm命令安装下Vue包
安装好了之后就可以直接在html文件中引用本地Vue了
Vue的一些指令
v-text
指令:这个是用来渲染文本的,可以简写:{{ message}} 切记!!!{{message}}要写在id为app的div中
<div id="app">
{{msg}}
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data :{
msg:"hello world!!!"
}
})
</script>
浏览器中就会显示出来这段话
v-html
指令,跟上面的是一样的,都是渲染文本的。区别是:这个可以解析html,!!!这个没有简写!!!
<div id="app">
<div v-html="message"></div>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
let app= new Vue({
el:'#app',
data:{
message:"<h1>我是H1</h1>"
}
})
</script>
解析出来的内容就是我是H1标签
v-on
事件绑定 v-on:click=“xxx” 简写: @click=“xx” 来来来!废话不多说,上代码! @click=“可以调用方法”
<div id="app">
<h4>{{message}}</h4>
<input type="button" value="点我!" v-on:click="message='lahu'">
<input type="button" value="点我!" v-on:click="info">
<!-- @click="可以用简写方法" -->
<input type="button" value="点我!" @click="info1">
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: "哈哈哈",
},
methods: {
info(){
this.message="好好好"
},
info1(){
this.message="简写"
}
},
})
</script>
这个就不用上图了 想看的自己可以复制下代码看下