vue之旅:初识vue

vue是一个mvvm框架(库),和angular类似
比较容易上手.小巧

mvc:Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写

而vue是mvvm,m有了,v有了,vm相当于c

vue指令  v-xxx

其实vue就是一片html代码配合上json,再new出来vue实例

适合:移动端项目,小巧

目前vue的发展势头很猛,github上的start数量已经超越angular

注意:与angular的共同点:不兼容低版本ie

---------------vue基本雏形-----------------
vue基本雏形

js部分

 1 --js部分--
 2 <script src="vue.js"></script>   
 3 <!--开头引入vue.js-->
 4
 5 <script>
 6 window.onload = function(){
 7     var c = new Vue({ //json
 8             el:‘#box‘, //element选择器,可以id #box,可以class .box,或者标签名body
 9
10             data:{  //data是数据部分
11                msg:‘welcome vue‘
12             }
13         });
14       };
15 </script>

html部分

1 --html部分---
2 <div id="box">
3     {{msg}}   //这里的msg即为data里的数据msg
4 </div>

原文地址:https://www.cnblogs.com/grhino/p/8547066.html

时间: 2024-11-08 21:31:26

vue之旅:初识vue的相关文章

vue学习笔记初识vue——使用HTML模板

在创建Vue实例时,如果声明了el配置项,那么你也可以省略template 选项.这时候,Vue.js将提取锚点元素的HTML内容,做为模板. 我们可以使用单一的el配置项来创建Vue实例: var vm = new Vue({el:'#app'}); 在Vue.js中,这种模板被称为HTML模板,而使用template配置项 书写的模板,被称为字符串模板. 工作原理 当Vue.js发现你提供的选项中没有template属性时,将提取el属性所 指定的DOM节点的outerHTML内容作为模板内

初识 vue —— 最简单的前后端交互示例

一.初识 vue 时的困惑 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧.都说 vue 的官方教程写得好,所以我就从官方教程开始学习.官方教程说"Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用."但是这个概念是个什么鬼?还是让人一头雾水嘛.而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳永

Vue mixins的初识和使用

项目图片路径需要加入基础路径前缀,开始使用的方法是在配置文档定义一个变量,组件使用的时候导入,但是这次无法 原文:大专栏  Vue mixins的初识和使用 原文地址:https://www.cnblogs.com/petewell/p/11422385.html

vue学习笔记之初识vue——实例方法声明

如果需要在点击鼠标时,执行一个复杂的操作,那么采用单一的表达式 作为v-on指令值就不够了 -- 我们需要将复杂的操作封装为Vue实例的 一个方法,然后将v-on指令的值设置为这个方法. 使用methods配置项来声明Vue实例的方法.当Vue.js创建一个Vue实例时, 会将methods配置项中声明的方法,挂接到Vue实例对象上: 实例方法可以直接通过实例对象调用,例如,对于上图中的vm实例: vm.handler(); //正确 实例方法另一个常见的用途,是将方法名声明为v-on指令的值,

初识vue

本文主要介绍一下使用npm搭建vue脚手架.(以下是windows系统下的操作,win7+) 1. npm是个命令行工具,在搭建vue脚手架之前首先要安装node.js  下载地址为 https://nodejs.org/en/,如下图 左边的8.11.3是我写博文这个时候的最稳定版本, 生产环境请下载这个,实验学习阶段随意.右边是当前最新版本.下载完成后,点击安装文件然后下一步下一步就可以了,比较简单. 另外, vue官网有详细的搭建命令介绍: http://doc.vue-js.com/v2

Vue -- ES6 快速入门,Vue初识

一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 20; } x // ReferenceError: x is not defined y // 20 效果如下: var声明变量存在变量提升.也就是在声明变量之前就可以使用该变量. console.log(x) // undefined,var声明变量之前可以使用该变量 var x = 10; 刷新

五十三、初识vue,实例成员语法,指令,

vue 1.什么是vue? 可以独立完成前后端分离式web项目的JavaScript框架 2.为什么要学习vue? 三大主流框架:Angular(脸书).React(git公司).vue(中国人第三方) 先进的前端设计模式:MVVM 可以完全脱离服务器,以前端代码复用渲染整个页面:组件化开发 vue框架 vue是前端框架:Angular(脸书).React(git公司).vue(中国人第三方) vue:结合其他框架优点,轻量级,中文API,数据驱动,双向绑定,MVVM设计模式.组件化开发.单页面

vue实战(一):利用vue与ajax实现增删改查

vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> <%@ include file="../commons/taglib.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

【Vue】详解Vue组件系统

Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用 通过Vue.component()去注册一个组件,你就可以全局地使用它了,具体体现在每个被new的 Vue 实例/注册组件, 的template选项属性或者对应的DOM模板中,去直接使用 注册组件 全局注册 例如,放在通过new创建的Vue实例当中: Vue.component('my-component', { template: