Vue 引入及简单示例
Vue 渐进式JavaScript 框架 学习笔记 - 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", // element
data: {
myname: '我的名字是张三'
}
})
</script>总结
Vue 渐进式JavaScript 框架 学习笔记 - Vue 引入及简单示例
原文地址：https://blog.csdn.net/json_ligege/article/details/145290333
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！