Vue 渐进式JavaScript 框架 学习笔记 - Vue 引入及简单示例
目录
与jquery区别
Vue引入
两种方式引入
下载到本地
代码结构
简单示例
Style中引入vue.js
对vue语法进行解析
对三目运算符支持
设置变量（状态）
总结
与jquery区别
不需要手动操作dom，都封装到vue底层中了，只需要数据开发即可。
Vue引入
两种方式引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>安装教程给出了更多安装Vue的方式。不推荐新手直接使用 vue-cli, 尤其是在你还不熟悉基于Node.js的构建工具时。
下载到本地
2.x版本下载到本地。下载地址如下：
https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
3.x版本下载到本地。下载地址如下：
https://unpkg.com/vue@3/dist/vue.global.js
代码结构
下载到本地后，创建lib文件夹，放入待之后引入调用。
2.x版本的命名为vue.js，3.x的命名为vue.next.js。
结构如下图：
简单示例
使用一个div作为一个根节点来解析vue。
支持的是表达式语法。
Style中引入vue.js
<script src="lib/vue.js"></script>对vue语法进行解析
创建一个id为box的div与另一个div中设置同样的算式，
进行对比查看解析情况，示例如下：
<div id="box">{{100 * 3}}
</div><div>{{100*3}}
</div>
<script>new Vue({el:"#box", // element})
</script>对三目运算符支持
示例如下：
<div id="box">{{100 * 3}}{{100>101?'第一个数比第二个数大':'第一个数比第二个数小'}}
</div>设置变量（状态）
在vue中设置解析的变量也叫状态，是通过在data中设置来实现的。
示例如下：
<div id="box">{{100 * 3}}{{100 > 101 ? '第一个数比第二个数大' : '第一个数比第二个数小'}}{{myname}}
</div>
<script>new Vue({el: "#box", // elementdata: {myname: '我的名字是张三'}})
</script>总结
Vue 渐进式JavaScript 框架 学习笔记 - Vue 引入及简单示例
