目录
一、介绍
二、简单的指令学习
1.Vue的书写基本语法
2.v-clock解决
3.v-text填充不会出现出现闪动
4.v-html有风险，原则是永远不要用在客户提供的内容上
5.v-per 跳过编译直接显示
6.v-once 只能编译一次，提高性能
7.v-model 双向数据绑定
8.v-on 绑定事件，缩写用法（@）
9.v-bind绑定动态属性 缩写（:）
三、MVVM思想
前言
可以进一步的了解和学习，主要还需要下载文件，来进行代码的编译
安装文件地址：
安装 、Vue.js (vuejs.org)
一、介绍
Vue是渐进式框架
Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层
当与"现代化的工具链" ，以及各种支持"类库" 结合使用时，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思想
M（model）数据
V（view）DOM
VM(View-Model) 控制逻辑
核心思想：
把不同的业务代码放到不同的模块中，再通过特定的逻辑组织到一块。双向绑定的方式，从试图到模型用事件监听，从模型到试图用的是数据绑定。
