vue的特点在于:响应的数据绑定、组合的视图组件。

vue的文件,分成三个部分<template>html模板</template>  <script>js</script>  <style>css<style>,这三个部分组成一个vue的组件。

我们先用vue-cli来初始化一个项目。

1.Node.js安装

https://nodejs.org/en/download/

2.安装vue-cli

npm install -g vue-cli

3.使用vue-cli初始化项目

 vue init webpack-simple my-project-name

4、进到目录

cd my-project

5、安装依赖

npm install

6、开始运行

npm run dev

运行后我们就可以在浏览器中看到一个这样的页面了

这是我们刚刚安装的vue项目,现在我们可以把它原来的页面删除或者改动,写自己需要的项目了。

new一个vue对象,主要包含了三个重要的属性data(vue对象的数据相当于model)、method(vue对象的方法)、watch(vue对象的事件监听)

模板指令将视图层(html)和逻辑层(data)连接起来,常用的模板指令:

v-if(v-show):判断指令

v-text(v-html、{{}}):模板渲染

v-for:循环指令

v-on:事件绑定

vue入门知识的更多相关文章

  1. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  2. React的入门知识与概念【1】

    回顾在以往的项目开发中,从最初的使用的原生html+js+css+jquery开发,到后来随着项目功能的增加,也渐渐学习了Vue.js框架的开发,以及Vue.js的全家桶Axios,Vue-route ...

  3. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  4. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  5. vue入门(二)----模板与计算属性

    其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...

  6. Vue大概知识体系和学习参考

    Vue大概知识体系和学习参考文档 官方文档学习,参考,借鉴地址:https://cn.vuejs.org/v2/guide/installation.html 菜鸟教程:https://www.run ...

  7. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  8. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  9. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

随机推荐

  1. java web相对路径和绝对路径总结

    java web 开发过程中很多地方涉及url路径的问题,比如jsp页面.servlet之间的跳转.其实,可以将url中的/xxx看成一级目录,然后像看待目录层级之间的关系那样去看待url路径.接下来 ...

  2. LeetCode:5. Longest Palindromic Substring(Medium)

    原题链接:https://leetcode.com/problems/longest-palindromic-substring/description/ 1. 题目要求:找出字符串中的最大回文子串 ...

  3. BI领军者之一Tableau试用浅谈

    下图是最新的Gartner BI Magic Quadrant,其中领军者之一的Tableau表现的异常突出,执行力象限上直接甩开其它产品一条街,前瞻性象限上略微超越了MSBI,怀着无比的好奇心,特意 ...

  4. request.getparameter() 获取中文出现乱码 问题

    http请求是以ISO-8859-1的编码来传送url的 如果页面的content-type为utf-8,那么在发送请求时,会将字符转成utf-8后进行传送 如: 中 的UTF-8编码为:E4 B8 ...

  5. 「日常训练」「小专题·USACO」 Barn Repair(1-4)

    题意 之后补. 分析 这题同样也很精巧.我们不妨思考一下,如果只允许用一块木板,那么要购买多少距离?是整个的距离吗?不是,是从第一个到最后一个(哈哈哈哈哈哈哈).但是,不包括第一个的"左边& ...

  6. PHP的array_merge()合并数组

    ,4];print_r(array_merge($arr1,$arr2));返回结果:Array(    [a] => 3    [b] => 2    [0] => 4)1注释:当 ...

  7. Selenium八大元素定位方式

    1.根据id来定位: import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.sele ...

  8. 接口测试工具postman(一)下载安装说明

    Postman是Google开发的一款功能强大的网页调试与发送网页HTTP请求,并能运行测试用例的的Chrome插件. 主要功能包括: 1.模拟各种HTTP requests 从常用的 GET.POS ...

  9. i8浏览器不支持placeholder属性解决办法,以及解决后,文字不居中问题

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  10. 可以完成99%的静态页面的HTML标签

    HTML:一套浏览器认知的规则HTML分为两个部分,头和身体.一个完整的网页相当于一个裸体的人,我们利用HTML给它穿上衣服,使它更好看.下面我将为大家介绍一下HTML一些基本的标签,而这些基本的标签 ...