哇哦 VUE基本语法！！！

李恩泽的博客
56 阅读2分钟

Vue

Vue.js是前端三大新框架:

​ Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增

Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的API实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言

Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统

环境搭建

devtools

vue-devtools可以方便开发者进行Vue中变量等信息的调试跟踪

  • 下载vue-devtools
git clone https://github.com/vuejs/vue-devtools
  • 进入到vue-devtools目录下安装依赖包
cd vue-devtools-dev
cnpm install 
cnpm run build
  • 注意：在进行调试工具安装时，首先需要修改shells>chrome文件夹下的mainifest.json中的persistent为true
  • 将插件目录下的chrome文件夹拖入到chrome浏览器的扩展程序下，记得打开调试模式

扩展程序可以通过浏览器访问

chrome://extensions/

vue-cdn

最方便的使用vue，可以通过cdn，直接引入vue的js文件即可

  • 开发版本，包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 生产环境版本，优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

基本语法

每个vue应用都是通过实例化一个新的vue对象开始的

第一个模板语法，首先页面中要具有vue可以操作的主对象元素

这个dom下的元素将会被vue接管

<div id="content">
    {{ message }}
    <!-- 这个也叫做插值表达式 -->
</div>

接管该标签，初始化vue实例对象

var vm = new Vue({ 
    // vm这个变量不允许使用连字符，可以使用下划线，比如vm-data是不允许的
    el: "#content", 
    // 对应document中的一个标签，当vue对象创建后，这个标签内的区域就被接管
    data: {
        message: "这是vue里的变量"
    }
})

当一个vue实例被创建时，vue的响应式系统中加入了对其data对象中能找到的所有属性

当这些属性值被改变时，视图也会发生相应，并将对应属性更新为新的值

avatar
文章
阅读
粉丝