Vue 是什么应该怎么用？
前言
vue是Javascript里的一个框架，因为是一套框架所以在编写Vue程序前要导入Vue的包。
<!-- 包1 --> <!-- 开发环境版本，包含所有东西 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- 包2 --> <!-- 上面个包的简约版，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
导包时遇到的问题：
报错信息：Cross-origin resource needs a 'crossorigin' attribute to be eligible for integrity validation.
解决办法,把包的链接复制到后面这个链接里转换一下：https://www.srihash.org/
Vue编写Hello World
<html> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!--导入vue包--> <body> <div id="app"> <!--设置id选择器，为后面好调用div标签--> <!--id、类、标签选择器都行--> {{ write }} <!--调用后面同为write的值--> </div> <script> var app=new Vue({ //创建一个vue实例 el:'#app', //通过id选择器定位到div标签，id、类、标签选择器都行 data:{ //存放数据 write:"Hello World" //变量赋值 } }) </script> </body> </html>
Vue中data中的复杂数据类型处理
<html> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!--导入vue包--> <body> <div id="app"> <!--设置id选择器，为后面好调用div标签--> <!--id、类、标签选择器都行--> {{ write }} <!--调用后面同为write的值--> <h3>{{info.name}}</h3> <h3>{{info.sex}}</h3> <ul> <li>{{family[0]}}</li> <li>{{family[1]}}</li> <li>{{family[2]}}</li> </ul> </div> <script> var app=new Vue({ //创建一个vue实例 el:'#app', //通过id选择器定位到div标签，id、类、标签选择器都行 data:{ //存放数据 write:"对象数据类型和数据数据类型处理方法如下" , //变量赋值 info:{name:"小红",sex:"男",year:18}, //对象数据类型 family:["爸爸","妈妈","姐姐"] //数组数据类型 } }) </script> </body> </html>
