什么是Vue框架，Vue框架的搭建，插值表达式，基本指令

什么是Vue框架

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动

搭建Vue环境

我们一般不会自己去搭建Vue的环境的，因为我吗自己搭建的性能一般都不会比官方提供的好，所以这里我们也不会自己去搭建，而是直接下载官方的脚手架

在你要下载的目录下打开小黑窗然后输入安装指令
npm install @vue/cli -g -g是为了下载到全局中去，这样以后的项目就不需要每一个都去下载
下载可能会有点慢，其中也有可能会丢包，丢包了就自己在重新下载

下载好后我们就来建一个项目
vue create 项目名称（一般直接写app）

后面会让你选择一些需要安装的东西，新手都不需要去自定义，直接回车，下载官方默认的就好了

下载好后就进入项目文件夹: cd app

然后启动：npm run serve 的启动指令是生成的打包文件在内存中不会写入磁盘用于开发阶段
npm run build 的指令是生成的打包文件在dist中 用于项目上线

这就已经创建好一个项目，可以开始做项目啦

其中官方嗐提供了一个可视化的操作界面，指令是 vue ui，输入后就会自动跳出浏览器，就可以进行一个可视化的操作

插值表达式

插值表达式插入数据：在标签花括号中使用{{}}插入js表达式
例如：变量，函数调用，三目运算，加减乘除等等
插值表达式中的标识符 ，代表vue对象中的data的属性名或者methods中的方法名

这里我并没有用脚手架，而是直接cdn引入的vue.js代码

<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
<div id="app">
    <span>姓名：{{name}}</span>
    <br>
    <span>年龄：{{age}}</span>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: "lili",
            age: "20"
        }
    })
</script>

执行结果

基本指令

当我们页面上出现闪屏的bug时，我们可以用v-clock来解决

v-cloak：加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,我们可以利用这个特性来来解决闪屏问题

出现闪屏这个bug的原因是因为执行的顺序问题，页面加载从上至下先要渲染div里面的东西到页面上，
渲染完毕后才会执行下面的script标签里面的代码，才会把代码里面的值赋给上面div里面的变量，所以出现闪屏效果

解决：
我们可以使用v-clock这个属性，给div设置v-clock属性，然后设置为隐藏，当浏览器渲染到这里的时候是隐藏状态页面上就不会有任何显示
然后接着执行下面的js代码，当执行js代码是就会使v-clock属性失效，那么div里面的东西就是显示状态
js里面的变量赋值上来，就不会有闪屏状态啦

<style>
  [v-clock] {
       display: none;
   }
</style>

<div id="app" v-clock>
   <p>昵称：{{name}}</p>
   <p>爱好：{{habbit}}</p>
</div>
<script>
   new Vue({
       el: "#app",
       data: {
           name: "karen",
           habbit: "read"
       }
   })
</script>

执行结果

innerHTML 和 innerText用法基本一样，只是前面会解析html标签，而后者不会，会把它里面的所有内容都显示在页面上

指令v-html* 相当于innerHTML
指令v-text相当于innerText

<div id="app1">
用户昵称：<p v-text="username"></p><br>
<br>
用户年龄：<p v-html="userage"></p>
</div>
<script>
new Vue({
	el: "#app1",
	data: {
		username: "Ben",
		userage: "20",
	}
})
</script>

执行结果

指令v-pre插件表达式就被识别为文本,而不是js表达式
指令v-bind属性绑定，src，herf里面写的都是字符串，如果要写变量就要v-bind来属性绑定
标准写法: v-bind:src=“变量”
简写形式: :src=“http://…”

<div id="app">
<p v-pre>用户昵称：{{username}}</p>
	用户头像：<img :src="userimg">
	<br>
	跳转百度：<a v-bind:href="userhref">{{username}}</a>
	<p>用户年龄：{{userage}}</p>
	<input type="text" :value="number">
	</div>
	<script>
	new Vue({
		el: "#app",
		data: {
			username: "小艾",
			userimg: "./img.jpg",
			userhref: "http://www.baidu.com",
			userage: "18",
			number: "12345678695"
		}
	})
</script>

执行结果