前言
可以进一步的了解和学习，主要还需要下载文件，来进行代码的编译
安装文件地址：
安装 — Vue.js (vuejs.org)https://cn.vuejs.org/v2/guide/installation.html
一、介绍
Vue是渐进式框架
Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层
当与现代化的工具链https://cn.vuejs.org/v2/guide/single-file-components.html以及各种支持类库https://github.com/vuejs/awesome-vue#libraries--plugins结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、简单的指令学习
1.Vue的书写基本语法
<div id="text">
<div>{{msg}}</div> <!--插值表达式，数据入的接收-->
</div>
<script src="./vue.js"></script><!--引入文件，通过在官网下载-->
<script>
let vm = new Vue({
el:"#text",<!--告诉Vue填充到哪里-->
data:{
msg:'Hello Vue'<!--填充的数据-->
}
})
</script>
2.v-clock解决
<style>
[v-cloak]{
display: none; /*解决闪动问题*/
}
</style>
<div v-cloak>{{msg}}</div>
3.v-text填充不会出现出现闪动
<div v-text="msg"></div><!--填充，不会出现闪动-->
4.v-html有风险，原则是永远不要用在客户提供的内容上
<div v-html="msg1"></div> <!--有风险，第三方软件不推荐使用-->
5.v-per 跳过编译直接显示
<div v-pre>{{msg}}</div><!--跳过编译，直接显示-->
6.v-once 只能编译一次，提高性能
<div v-once>{{info}}</div><!--只会编译一次，不会二次编译，可以提高性能-->
2~6完整代码
<style>
[v-cloak]{
display: none; /*解决闪动问题*/
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>{{msg}}</div>
<div v-text="msg"></div><!--填充，不会出现闪动-->
<div v-html="msg1"></div> <!--有风险，第三方软件不推荐使用-->
<div v-pre>{{msg}}</div><!--跳过编译，直接显示-->
<div v-once>{{info}}</div><!--只会编译一次，不会二次编译，可以提高性能-->
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
msg:'Hello Vue',
msg1:'<h1>HTML</h1>',
info:'good'
}
})
</script>
7.v-model 双向数据绑定
<div id="text">
<div>{{msg}}</div>
<div><input type="text" v-model="msg"></div><!--双向数据绑定-->
</div>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el:"#text",
data:{
msg:'Hello Vue'
}
})
</script>
8.v-on 绑定事件，缩写用法（@）
<div id="btn">
<div>{{num}}</div>
<div><button v-on:click="num++">点击</button></div>
<div><button @click="num++">点击</button></div><!--缩写-->
<div><input type="button" v-on:click="num++" value="点击"></div>
<div><input type="button" @click="num++" value="点击"></div><!--缩写-->
</div>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el:"#btn",
data:{
num:0
}
})
</script>
9.v-bind绑定动态属性 缩写（:）
<div id="app">
<span v-bind:title="content">小不人她，知制落极。</span><br>
<span :title="content">小不人她，知制落极。</span> <!--缩写-->
</div>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data(){
return{
content:`加载于${new Date().toLocaleString()}`
}
}
})
</script>
三、MVVM思想
1.M（model）数据
2.V（view）DOM
3.VM(View-Model) 控制逻辑
核心思想：
把不同的业务代码放到不同的模块中，再通过特定的逻辑组织到一块。双向绑定的方式，从试图到模型用事件监听，从模型到试图用的是数据绑定
本文转载自: https://blog.csdn.net/yzq0820/article/details/125979201
版权归原作者 小余努力搬砖 所有， 如有侵权，请联系我们删除。
版权归原作者 小余努力搬砖 所有， 如有侵权，请联系我们删除。