vue.js主要内容

vue的主要内容

1.了解vue

2.vue开发环境的搭建和脚手架工具的使用

3.vue具体的指令和项目实战

  1.了解vue

    1.具备基础:html、css、js,模块化概念、ES6语法(简单即可)

    2.特点: vue吸收了react和angular的优点

    3.vue的一个组件:template---------->html

          script-------------->js

          style--------------->css

    4.vue文件的后缀名是.vue

  2.vue开发环境的搭建和脚手架工具的使用

    1.vue开发环境的搭建-npm/cnpm命令行安装     

1 # 全局安装 vue-cli
2 $ npm install -g vue-cli
3 # 创建一个基于 "webpack" 模板的新项目
4 $ vue init webpack my-project
5 # 安装依赖,走你
6 $ cd my-project
7 $ npm install
8 $ npm run dev

    2.vue.js的重要组件

      1.data

      2.methods

      3.watch

      4.模板指令-html和vue对象的粘合剂

        数据渲染---->v-text,v-html,{{}}

        控制模块隐藏--->v-if,v-show---值是布尔值,区别是v-if直接不渲染,而v-show通过display:none隐藏

        渲染循环列表--->v-for

        事件绑定------->v-on:click="",简写@click=""

        属性绑定------->v-bind,例如v-bind:src="",简写:src="",:class="{}",:class="[]"

    【总结】

      1. new一个vue对象的时候你可以设置它的属性,其中最重要的包括三个,分别data,methods,watch。

      2.data代表vue对象的数据,methods代表vue对象的方法,watch设置了对象监听的方法。

      3.vue对象里的设置通过html指令进行关联  

      4.重要的指令包括

         v-text[渲染数据]、v-if[控制显示]、v-on[绑定事件]、v-for[循环渲染]等。

时间: 2024-08-06 16:52:50

vue.js主要内容的相关文章

vue.js 学习内容总结

总体架构: // 实例化vue对象(MVVM中的View Model) new Vue({ // vm控制的区块为id为app的div,此div中的所有vue指令均可以被vm解析 el:'#app', data:{ // 数据 (MVVM中的Model) name:"", price:"", num:"", pic:"" }, //页面加载执行方法 created: function () { //设置请求路径 var url

Vue.js实践:一个Node.js+mongoDB+Vue.js的博客内容管理系统

项目来源 以前曾用过WordPress搭建自己的博客网站,但感觉WordPress很是臃肿.所以一直想自己写一个博客内容管理器. 正好近日看完了Vue各个插件的文档,就用着Vue尝试写了这个简约的博客内容管理器(CMS). 嗯,我想完成的功能: 一个基本的博客内容管理器功能,如后台登陆,发布并管理文章等 支持markdown语法实时编辑 支持代码高亮 管理博客页面的链接 博客页面对移动端适配优化 账户管理(修改密码) Demo 登陆后台按钮在页面最下方"站长登陆",可以以游客身份登入后

web前端技术内容详解之Vue.js框架

Vue.js是一个渐进式框架,只需要具备基本的HTML/CSS/JavaScript基础就可以快速上手.在用Vue.js构建大型应用时推荐使用NPM安装,但是需要注意npm的版本需要大于3.0.在通过npm安装项目后,我们需要对其目录进行解析:(1)Build:项目构建(webpack)相关代码;(2)config:配置目录,包括端口号等.(3)node_modules:npm加载的项目依赖模块(4)src:这个目录当中的内容包含了我们基本上要做的事情,这里包含了几个文件:(一)assets:存

vue.js加载新的内容

vue是一种轻巧便捷的框架,那么如何进行对于数据加载的刷新呢?以下就是我对于vue.js数据加载的一点想法 源码: <div @scroll="onScroll($event)" style="height: 100%;overflow: auto;"> <ul class="shop-brand-index" v-show="sitems.length > 0" > <li v-for=&

select 标签 未选择任何内容 在 vue.js 中使用遇到的坑

select 标签使用时,经常会遇到不进行任何的选择,即 value=‘’ 的情况 这时如果配合  vue.js 的 v-model 使用,会使得 v-model 标签失效,也就是说,v-model 标签配合 select 不能存在  <option value="" ></option>的情况 但是如果,我们必须有什么也不选择的选项的话,我们可以 <option value="%" >点击选择...</option>

Vue.js项目模板搭建

前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

vue.js路由

Vue.js 路由 Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA). Vue.js 路由需要载入 vue-router 库 中文文档地址:vue-router文档. 安装 1.直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js NPM 推荐使用淘宝镜像: cnpm install vue-route

Vue.js——vue-resource全攻略

概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-re

Vue.js响应式原理

本文和大家分享的主要是Vue.js 响应式原理相关内容,一起来看看吧,希望对大家 学习Vue.js有所帮助. 关于Vue.js Vue.js 是一款 MVVM 框架,上手快速简单易用,通过响应式在修改数据的时候更新视图. Vue.js 的响应式原理依赖于 Object.defineProperty  ,尤大大在Vue.js 文档中就已经提到过,这也是 Vue.js 不支持 E8 以及更低版本浏览器的原因. Vue 通过设定对象属性的  setter/getter  方法来监听数据的变化,通过 g