不会叫的狼
不会叫的狼

vue基础入门

1. 工具

VSCode
VSCode 安装教程（超详细）

Node.js
使前端开发发生改变，Node.js可以做服务器程序， node index.js启动服务。会自动安装 npm。

npm
npm（Node Package Manager） 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。 npm 是 JavaScript 的包管理工具，也是世界上最大的软件注册表。相当于后端开发的 maven。

npm常见指令：

//生成package.json，相当于pom.xml
# npm init                    
# npm init --yes  

//全局安装
# npm install 模块名 -g
//本地
# npm install 模块名
//安装依赖，并且记录在package.json
# npm install 模块名 --save

//卸载
# npm uninstall 模块名

//查看当前安装模块
# npm ls

//安装 cnpm 工具，指定国内 npm 镜像源
# npm install -g cnpm --registry=https://registry.npm.taobao.org
//cnpm 安装
# cnpm install 模块名

//安装 yarn 工具，指定国内npm镜像源
# npm install -g yarn --registry=https://registry.npm.taobao.org

示例：

# cnpm install express --save

安装express框架，相当于springMvc，查看 package.json 以及 node_modules（各种依赖包）。

Vue
是一套构建用户界面的渐进式框架。

  • Vue 只关注视图层， 采用自底向上增量开发的设计。
  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
  • Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

2. vue基础语法

Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

2.1 插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值

<body>
	<div id="zhq">
		<h1>{{title}}--{{ts}}h1>
	div>
body>
<script>
	var vm=new Vue({
		el:'#zhq',                  
        // 定义属性，并设置初始值
		data:{					    
			title:'Hello Vue',
			ts:new Date().getTime()
		}
	});
script>

在这里插入图片描述

{{...}} 标签的内容将会被替代为对应组件实例中 title 属性的值，如果 title 属性的值发生了改变，{{...}} 标签内容也会更新。

如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。

<h1 v-once>{{title}}--{{ts}}h1>

也可以使用 v-text，但v-text内容会覆盖该标签所有内容

<h1 v-text="'覆盖所有数据'">{{title}}--{{ts}}h1>

在这里插入图片描述

Html

使用 v-html 指令用于输出 html 代码

<body>
	<div id="zhq">
        <p>使用双大括号的文本插值: {{ rawHtml }}p>
        <p>使用 v-html 指令: <span v-html="rawHtml">span>p>
    div>
body>
<script>
	var vm=new Vue({
		el:'#zhq',                  
        // 定义属性，并设置初始值
		data:{					    
			rawHtml: '这里会显示红色！'
		}
	});
script>

在这里插入图片描述

属性

HTML 属性中的值应使用 v-bind 指令。

<body>
	<div id="app">
        <img v-bind:src="imgSrc[num]" width="500" height="600">
	div>
body>
<script>
	var vm=new Vue({
		el:'#app',                  
        // 定义属性，并设置初始值
		data:{					    
			num:0,
			imgSrc: ["./image/1.jpg","./image/2.jpg","./image/3.jpg","./image/4.jpg"]
		}
	});
script>

使用 v-bind 动态设置标签的 src 属性。通常情况，v-bind可以省略，只需要 : 即可。

<img :src="imgSrc[num]" width="500" height="600">

对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。

<button v-bind:disabled="isButtonDisabled">按钮button>

上例，如果 isButtonDisabled 的值是 null 或 undefined，则 disabled 属性甚至不会被包含在渲染出来的