前言
Vue.js 自身不是一个全能框架–它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue.js 也能完美地驱动复杂的单页应用。
一、vue.js是什么
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 的核心库只关注视图层， 采用自底向上逐层应用的设计。不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
提示：以下是本篇文章正文内容，下面案例可供参考
二、声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
代码如下（示例）：
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
三、什么是指令
- 在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
- 类似于html页面中的属性 `
- 比如在angular中 以ng-xxx开头的就叫做指令
- 在vue中 以v-xxx开头的就叫做指令
- 指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定
1、v-clock的使用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-clock] {
display: none;
}
</style>
</head>
<body>
<!-- 对于MVVM的理解 -->
<!-- 解放DOM -->
<!-- 指令：就是vuejs为我们提供的方便操作的自定义属性 -->
<!-- VUE在mvvm的基础上创立使用 M:model数据 V：view页面显示 -->
<!-- View层，页面显示层 -->
<div id="app">
<!-- 1.在使用模板语法的标签上添加v-cloak的指令 -->
<p v-cloak>{{msg+1+1+1+1+1+1+1+1+1+1+1+1}}</p>
<!-- 模板语法 -->
</div>
<!-- View end -->
<script src="./js/vue.min.js"></script>
<script>
//创建一个vue环境，创建一个VM层
let vm = new Vue({
el: '#app',
data: {//Model层
msg: 'Hello world'
}
})
</script>
</body>
2、v-text的使用
<body>
<!-- 指令：标签的自定义属性 -->
<div id="app">
<!-- {{userName}} -->
<div v-text="username"></div>
</div>
<script src="./js/vue.min.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
userName:'admin'
}
})
</script>
</body>
3、v-html的使用
<body>
<div id="app">
<!-- {{myDiv}} -->
<div v-html="myDiv"></div>
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
myDiv:'<h1>Hi</h1>'
}
})
</script>
</body>
4、v-pre的使用
<body>
<div class="wsx">
<p v-pre>{{say}}</p>
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'.wsx',
data:{
say:'ALL the best!'
}
})
</script>
</body>
5、v-once的使用
<body>
<div id="app">
<p v-once>{{msg}}</p>
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'最初的梦想：宇航员'
},
mounted(){
this.msg='后来我成为了火箭工程编译工程师'
}
})
</script>
</body>
6、v-model的使用
<body>
<!-- 双向数据绑定 -->
<div id="app">
<input type="text" value="" v-model="userName">
<p>{{userName}}</p>
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
userName:'admin'
}
})
</script>
</body>
7、v-on的使用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-clock] {
display: none;
}
</style>
</head>
<body>
<!-- 解放DOM -->
<div id="app">
<input type="text" v-model="num"><br>
<input type="button" value="+1" v-on:click="add">
<input type="button" value="-1" @click="sub">
</div>
<!-- View end -->
<script src="./js/vue.min.js"></script>
<script>
//创建一个vue环境，创建一个VM层
new Vue({
el: '#app',
data: {
num:1
},
//将num值进行操作
//methods：用来写页面需要的方法的配置项
methods:{
add:function(){
this.num +=1
//this.num = this.num+1
},
sub:function(){
this.num -=1
},
}
})
</script>
</body>
8、v-bind的使用
<body>
<!-- v-bind：用来绑定属性的 可以简写为：冒号 -->
<div id="app">
<img v-bind:src="srcUrl" alt="">
<img :src="srcUrl" alt="">
</div>
<script src="./js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
srcUrl:'./img/psb.jpg'
},//这个逗号不可以省略
mounted(){
//this也必须要，它是指VM实例
this.srcUrl='./img/psb (1).jpg'
}
})
</script>
</body>
提示：新人小白一枚，如有不对请多多指教！希望给您带来帮助！多谢。
本文地址：https://blog.csdn.net/weixin_53000915/article/details/110498326
