1. MVVM模式model view view-model：数据视图模型 模型视图数据 model: 数据模型，PHP／JAVA等任何后台服务语言从数据库中获取的数据 view: 视图模型；html页面 view-model: 视图数据桥梁，mvvm框架自动完成页面的渲染和数据提交（js dom操作） MVVM代表框架有：Angular、Vue.js等。 2. Vue.js 简介官网介绍：Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。 对于渐进式框架有两种使用方法：页面引用和Node.js 模块开发。 作为入门，我们使用页面引用方法，学习vue.js的语法。模块开发后面再说。 3. 安装Vue.js方法一：官网下载 vue.js 文件。 方法二：npm install vue 4. 开发工具推荐Sublime Text 3 或者 Visual Studio Code。 我使用的是 Visual Studio Code（VSCode）。如果你也是使用该开发工具的话，这里给出几个好用的小插件： ☛ path intellisense 路径提示插件 ☛ live server 热加载 ☛ vue 2 Snippets Vue的代码提示工具 5. 在浏览器中加载调试组件火狐安装：在火狐的官方插件库进行查询安装； Chrome浏览器：通过三方网站获取下载地址，手动安装插件 三方下载地址：crx.2333.me vue devtools.crx 的ID：nhdogjmejiglipccpnnnanhbledajbpd 6. hello world每一次学习新的语言、新的框架，都必将经历 Hello World 程序。 直接上代码： html lang='en'>head> meta charset='UTF-8'> meta name='viewport' content='width=device-width, initial-scale=1.0'> meta http-equiv='X-UA-Compatible' content='ie=edge'> title>Documenttitle> script src='../js/vue.js'>script> script> window.onload = function (){ //新建Vue的实例 new Vue({ el: '#app',//el表达式，css的元素选择器 data: {//vue 中定义数据，用于页面中进行加载 hello:'Hello word !'//变量名：内容 } }) } script>head>body> div id='app'> {{ hello }} div>body>html>
好，hello word 出来了。你以为我这样就会结束了吗？当然不是。 接下来在 上段代码倒数第四行 {{ hello }} 下一行加一行代码： hr />input type='text' v-model = 'hello' />来看看结果如何：
惊不惊喜，哈哈。简单的几行代码就实现了。 7、生命周期视图Vue.js 官网的原话是这样的：下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。 那我就先把图放在这，慢慢看。 作者：秋季长青 |
|
|
