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:事件名="表达式||函数名"  简写 @事件名="表达式||函数名",事件名可原生或自定义

<input v-bind:value="name" v-bind:class="name"/>
<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 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入门学习的更多相关文章

  1. 【数据售卖平台】—— Vue2.0入门学习项目爬坑

    前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...

  2. vue入门学习(基础篇)

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  3. Hadoop入门学习笔记---part4

    紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...

  4. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  5. PyQt4入门学习笔记(三)

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

  6. PyQt4入门学习笔记(一)

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

  7. Hadoop入门学习笔记---part2

    在<Hadoop入门学习笔记---part1>中感觉自己虽然总结的比较详细,但是始终感觉有点凌乱.不够系统化,不够简洁.经过自己的推敲和总结,现在在此处概括性的总结一下,认为在准备搭建ha ...

  8. Retrofit 入门学习

    Retrofit 入门学习官方RetrofitAPI 官方的一个例子 public interface GitHubService { @GET("users/{user}/repos&qu ...

  9. MyBatis入门学习教程-使用MyBatis对表执行CRUD操作

    上一篇MyBatis学习总结(一)--MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据,算是对MyBatis有一个初步的入门了,今天讲解一下如何使用MyBatis对use ...

随机推荐

  1. Spring一套全通—工厂

    百知教育 - Spring系列课程 - 工厂 第一章 引言 1. EJB存在的问题 2. 什么是Spring Spring是一个轻量级的JavaEE解决方案,整合众多优秀的设计模式 轻量级 1. 对于 ...

  2. Jenkins file一行代码部署.NET程序到K8S

    什么是Jenkins共享库 随着微服务的增多,每个项目的都需要pipline文件,这样的话Pipeline代码冗余度高,并且pipeline的功能越来越复杂. jenkins可以使用Shared Li ...

  3. virtualbox + vagrant 安装centos7 以及 vagrant up下载太慢的解决方案

    下载安装 virtualbox下载 vagrant下载 下载启动镜像vagrant up有下载过慢的问题,可以到网页vagrant镜像仓库,找到自己需要的镜像,选择virtualbox版本下载 下载好 ...

  4. hivesql笔记

    一.常用聚合函数 count():计数 count(distinct 字段) 去重统计 sum():求合 avg():平均 max():最大值 min():最小值 二.hivesql执行顺序 from ...

  5. CODING添加ssh提示格式错误的问题

    不能去.shh文件夹打开id_rsa.pub文件查看 解决方法: 进入.ssh文件夹,然后右键git bash here 输入代码 cat id_rsa.pub 回车即可

  6. 大爽Python入门教程 3-5 习题

    大爽Python入门公开课教案 点击查看教程总目录 1 求平方和 使用循环,计算列表所有项的平方和,并输出这个和. 列表示例 lst = [8, 5, 7, 12, 19, 21, 10, 3, 2, ...

  7. [Vue]浅谈Vue3组合式API带来的好处以及选项API的坏处

    前言 如果是经验不够多的同志在学习Vue的时候,在最开始会接触到Vue传统的方式(选项式API),后边会接触到Vue3的新方式 -- 组合式API.相信会有不少同志会陷入迷茫,因为我第一次听到新的名词 ...

  8. Go语言核心36讲(Go语言实战与应用九)--学习笔记

    31 | sync.WaitGroup和sync.Once 我们在前几次讲的互斥锁.条件变量和原子操作都是最基本重要的同步工具.在 Go 语言中,除了通道之外,它们也算是最为常用的并发安全工具了. 说 ...

  9. [atARC068F]Solitaire

    对于最终的序列$a_{i}$,条件如下: 1.$a_{i}$是一个排列,且$a_{k}=1$ 2.不存在三元组$1\le x<y<z<k$,使得$a_{x}<a_{y}< ...

  10. 回顾Servlet开发

    1.建立的文件 2.servlet package com.shao.servlet; import javax.servlet.ServletException; import javax.serv ...