vue入门知识
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入门知识的更多相关文章
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- React的入门知识与概念【1】
回顾在以往的项目开发中,从最初的使用的原生html+js+css+jquery开发,到后来随着项目功能的增加,也渐渐学习了Vue.js框架的开发,以及Vue.js的全家桶Axios,Vue-route ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- vue入门(二)----模板与计算属性
其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...
- Vue大概知识体系和学习参考
Vue大概知识体系和学习参考文档 官方文档学习,参考,借鉴地址:https://cn.vuejs.org/v2/guide/installation.html 菜鸟教程:https://www.run ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
- 45-Identity MVC:注册逻辑实现
1-注册页Register.cshtml <h3>Register</h3> @model MvcCookieAuthSample.ViewModel.RegisterView ...
- LEAVE TO LIST-PROCESSING
LEAVE SCREEN 現在の画面の処理を中止し.次の画面を呼び出す - LEAVE TO SCREEN 現在の画面の処理を中止し.動的に定義された次の画面を呼び出す - LEAVE [PROGRA ...
- Android开发——Google关于Application Not Responding的建议
秒内没有执行完毕. 2. 避免ANR的一些建议 Android applications normally run entirely on asingle (i.e. main) thre ...
- [Python 3.X]python练习笔记[2]-----用python实现七段数码管显示年月日
#SevenDigitsDrawV2.py import turtle import time def drawGap(i):#绘制数码管间隔 turtle.penup() turtle.fd(i) ...
- centos7下安装elasticSearch错误总结(单节点模式)
1.首先确定你安装了jdk,版本需要1.8以上 2.上传elasticsearchjar包,只需配置一个文件即可 修改配置文件config/elasticsearch.yml network.h ...
- (3)分布式下的爬虫Scrapy应该如何做-递归爬取方式,数据输出方式以及数据库链接
放假这段时间好好的思考了一下关于Scrapy的一些常用操作,主要解决了三个问题: 1.如何连续爬取 2.数据输出方式 3.数据库链接 一,如何连续爬取: 思考:要达到连续爬取,逻辑上无非从以下的方向着 ...
- C#调用C++编写的dll
界面还是C#写的方便点,主要是有一个可视化的编辑器,不想画太多的时间在界面上.但是自己又对C++了解的多一些,所以在需要一个良好的界面的情况下,使用C++来写代码逻辑,将其编译成一个dll,然后用C# ...
- Qt Qpushbutton美化问题
昨天在论坛看到一个网友的提问,如下 我想到的第一个就是可能需要重载Pushbutton,不过看到有网友回复可以使用stykesheet解决,今天尝试了一下,还是没有成功, 一下是我使用车重载的Push ...
- ADB常用指令
adb 命令是adb程序自带的一些命令:adb shell则是调用Android系统的命令,Android系统特有的命令都放在Android设备的/system/bin目录中 MonkeyRunner ...
- 怎么用Q-Q图验证数据集的分布
样本数据集在构建机器学习模型的过程中具有重要的作用,样本数据集包括训练集.验证集.测试集,其中训练集和验证集的作用是对学习模型进行参数择优,测试集是测试该模型的泛化能力. 正负样本数据集符合独立同分布 ...