vue2.x入门学习
vue安装
# 最新稳定版本
$ npm install vue # 最新稳定 CSP 兼容版本
$ npm install vue@csp
引包
cd /d/vue/demo
cnpm install vue@csp
$ ll node_modules/vue/dist/
total 1509
-rw-r--r-- 1 tanpengfei3 1049089 279 4月 27 2016 README.md
-rw-r--r-- 1 tanpengfei3 1049089 403335 9月 28 2016 vue.common.js
-rw-r--r-- 1 tanpengfei3 1049089 402783 9月 28 2016 vue.js
-rw-r--r-- 1 tanpengfei3 1049089 131766 9月 28 2016 vue.min.js
-rw-r--r-- 1 tanpengfei3 1049089 594279 9月 28 2016 vue.min.js.map
vue.min.js 压缩删减版
vue.js 完整版本
mkdir a01_v_newvue
mkdir -p static/js
cp ../node_modules/vue/dist/vue.js static/js/
index.html
<!DOCTYPE html>
<html>
<head>
<title>引包,el,模板,data, 插值</title>
</head>
<body>
<div id="app"></div> <script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript"> new Vue({
el:"#app",
template:`
<div>模板显示:{{msg}}</div>
`,
data:function(){
return {
msg: '数据'
}
}
}); </script> </body>
</html>
页面显示
模板显示:数据
注意事项:vue 与 Vue 是不同的
常用指令
以数据驱动dom:将经常操作dom的js方法化为一系列元素标签
v-text: 元素文本innerText,必须是双标签,将内容解析为字符串文本
v-html: 元素标签innertHTML
v-if: 判断是否插入dom,append remove,相关指令 v-else-if v-else
v-show:判断是否隐藏 display:none
v-for: 数组index,item 对象key,value,也可以是item,value
<!DOCTYPE html>
<html>
<head>
<title>引包,el,模板,data, 插值</title>
</head>
<body>
<div id="app"></div> <script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript"> new Vue({
el:"#app",
template:`
<div> <div v-text="mytext"></div>
<div v-html="myhtml"></div>
<div v-if="addButton">你看到我了</div> <button v-if="num==11">11</button>
<button v-else-if="num==12">12</button>
<button v-show="cshow">v-show</button> <ul>
<li v-for='item in arr_data'>
{{item}}
</li>
</ul>
<ul>
<li v-for='(index,item) in arr_data'>
{{index}}:{{item}}
</li>
</ul>
<ul>
<li v-for='(index,item) in arr_data'>
{{index}}:{{item}}
</li>
</ul>
<ul>
<li v-for='(key,value) in res'>
{{key}}:{{value}}
</li>
</ul>
</div>
`,
data:function(){
return {
mytext: '<h3>文本数据</h3>',
myhtml: '<h3>文本数据</h3>',
addButton: false,
num: 12,
cshow: false,
arr_data: ['天','地','君','亲','师'],
res: {data:"九千九百九十九朵...",action:"送你"}
}
}
}); </script> </body>
</html>
<!--使用 v-cloak能够解决插值刷新闪烁问题-->
<p v-cloak>{{msg}}</p>
单双向数据流及事件绑定
单向绑定:内存改变时,自动触发页面渲染,从而让页面随之变化;v-bind,通用元素
双向绑定:内存与页面相互影响; v-model,只作用于有value属性的元素
事件绑定:v-on:事件名="表达式||函数名" 简写 @事件名="表达式||函数名",事件名可原生或自定义
<div id="app"></div> <script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript"> new Vue({
el:"#app",
template:`
<div> <input v-bind:value="name" :class="name"></input>
<input type="text" v-model="name" v-bind:class="name"/> <button v-on:click="name='我点击了按钮'">变值</button>
<button v-on:click="change">方法调用</button>
</div>
`,
data:function(){
return {
name: 'input_value'
}
},
methods:{
change: function(){
this.name = '方法 调用'
}
}
});
</script>
IDE
https://download-cf.jetbrains.com/webstorm/WebStorm-2019.3.1.tar.gz
vue2.x入门学习的更多相关文章
- 【数据售卖平台】—— Vue2.0入门学习项目爬坑
前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...
- vue入门学习(基础篇)
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
- Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
- PyQt4入门学习笔记(三)
# PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...
- PyQt4入门学习笔记(一)
PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...
- Hadoop入门学习笔记---part2
在<Hadoop入门学习笔记---part1>中感觉自己虽然总结的比较详细,但是始终感觉有点凌乱.不够系统化,不够简洁.经过自己的推敲和总结,现在在此处概括性的总结一下,认为在准备搭建ha ...
- Retrofit 入门学习
Retrofit 入门学习官方RetrofitAPI 官方的一个例子 public interface GitHubService { @GET("users/{user}/repos&qu ...
- MyBatis入门学习教程-使用MyBatis对表执行CRUD操作
上一篇MyBatis学习总结(一)--MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据,算是对MyBatis有一个初步的入门了,今天讲解一下如何使用MyBatis对use ...
随机推荐
- Spring一套全通—工厂
百知教育 - Spring系列课程 - 工厂 第一章 引言 1. EJB存在的问题 2. 什么是Spring Spring是一个轻量级的JavaEE解决方案,整合众多优秀的设计模式 轻量级 1. 对于 ...
- Jenkins file一行代码部署.NET程序到K8S
什么是Jenkins共享库 随着微服务的增多,每个项目的都需要pipline文件,这样的话Pipeline代码冗余度高,并且pipeline的功能越来越复杂. jenkins可以使用Shared Li ...
- virtualbox + vagrant 安装centos7 以及 vagrant up下载太慢的解决方案
下载安装 virtualbox下载 vagrant下载 下载启动镜像vagrant up有下载过慢的问题,可以到网页vagrant镜像仓库,找到自己需要的镜像,选择virtualbox版本下载 下载好 ...
- hivesql笔记
一.常用聚合函数 count():计数 count(distinct 字段) 去重统计 sum():求合 avg():平均 max():最大值 min():最小值 二.hivesql执行顺序 from ...
- CODING添加ssh提示格式错误的问题
不能去.shh文件夹打开id_rsa.pub文件查看 解决方法: 进入.ssh文件夹,然后右键git bash here 输入代码 cat id_rsa.pub 回车即可
- 大爽Python入门教程 3-5 习题
大爽Python入门公开课教案 点击查看教程总目录 1 求平方和 使用循环,计算列表所有项的平方和,并输出这个和. 列表示例 lst = [8, 5, 7, 12, 19, 21, 10, 3, 2, ...
- [Vue]浅谈Vue3组合式API带来的好处以及选项API的坏处
前言 如果是经验不够多的同志在学习Vue的时候,在最开始会接触到Vue传统的方式(选项式API),后边会接触到Vue3的新方式 -- 组合式API.相信会有不少同志会陷入迷茫,因为我第一次听到新的名词 ...
- Go语言核心36讲(Go语言实战与应用九)--学习笔记
31 | sync.WaitGroup和sync.Once 我们在前几次讲的互斥锁.条件变量和原子操作都是最基本重要的同步工具.在 Go 语言中,除了通道之外,它们也算是最为常用的并发安全工具了. 说 ...
- [atARC068F]Solitaire
对于最终的序列$a_{i}$,条件如下: 1.$a_{i}$是一个排列,且$a_{k}=1$ 2.不存在三元组$1\le x<y<z<k$,使得$a_{x}<a_{y}< ...
- 回顾Servlet开发
1.建立的文件 2.servlet package com.shao.servlet; import javax.servlet.ServletException; import javax.serv ...