Vue学习笔记

Vue学习笔记

1.1、nodeJs

在安装vue之前，我们首先要在电脑上安装nodeJs，在百度上搜索nodeJs就可以下载了，其次还需要安装Visual Studio Code，这个是前端开发的工具，安装成功后即可安装vue了。

1.2、Vue的安装

vue的官网：vuejs.org

另外推荐使用v3.cn.vuejs.org

ctrl+R调出运行窗，输入cmd打开控制器终端，输入vue下载安装指令。

cnpm install -g @vue/cli

等待安装完成，在控制终端输入

vue --version

检测vue是否安装成功。

1.2.1、创建项目

打开VSCode，在盘符中创建一个文件夹用于存放项目代码，选择打开文件夹，选中创建的文件夹，打开项目后右键该项目，选择“在集成终端中打开”，在终端中输入如下指令创建vue项目：

vue create vue-demo

1.2.2、创建时可能遇到的问题

在创建项目时，可能会遇到创建失败并报错的情况，大致内容为“禁止运行脚本”问题，这种情况为没有权限，使用

get -ExecutionPolicy

指令查看该权限，若结果为无权限，则使用如下代码修改权限：

set -ExecutionPolicy RemoteSigned

VSC指令选择为上下键，勾选和取消为空格键，回车键确认。

在创建项目时，建议将Manually select features勾选，将Linter/Formatter取消勾选。

1.2.3、运行项目

cd vue-demo
npm run serve

1.2.4、安装vue高亮插件

在运行vue项目后，查看代码时全黑状态，可点击VSC编辑器左边栏如下的操作按钮，在输入框中输入volar，选择骷髅头样式的，下载安装即可。关闭终端为ctrl+J。

1.3、vue模板语言

vue的模板语言为双花括号：{ {}}，项目访问路径默认为localhost：8080

assets文件用于存放静态文件，app.vue是根组件，components是组件

1.3.1、vue中变量的创建与使用

vue中通过data函数创建变量，并通过{ {变量}}的方式取值，如：

<template>
  <h3>message={
  {message}}</h3>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      message:"测试"
    }
  }
}
</script>

1.3.2、v-html指令

v-html指令能直接传输html标签，如下：

<template>
 <div v-html="rawhtml"></div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      rawhtml:"<a href='https://www.baidu.com'>百度</a>"
    }
  }
}
</script>

1.3.3、v-bind指令

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值

<div id="app">
		<!-- 不能使用mustache语法 把imgURL直接当成字符串 在内容里面才能使用-->
		<!-- <img src="{
  {imgURL}}" alt=""> -->
		<img v-bind:src="imgURL" alt="">
		<a v-bind:href="aHref">百度一下</a>
		<a :href="aHref">百度一下</a>
	</div>

	<script src="../js/vue.js"></script>

	<script>
		const app = new Vue({
			el: '#app',
			data: {
				message: 'nihao',
				imgURL:'https://m.360buyimg.com/babel/jfs/t1/49107/14/3176/6019/5d0eea59E238562fd/2576bcda7fc37edd.jpg',
				aHref:'http://www.baiu.com'
			}
		})
	</script>

很多时候，我们希望动态的来切换class，比如：
当数据为某个状态时，字体显示红色。
当数据另一个状态时，字体显示黑色。

绑定class有两种方式：
对象语法
数组语法

对象语法动态绑定class

对象语法的含义是:class后面跟的是一个对象。

.active{
	color:red;
}

<div id="app">
	<h2 :class="active">{
  {message}}</h2>
</div>

<script>
const app = new Vue({
	el: '#app',
	data: {
		message: 'nihao',
		active:'active'
	},
}

<h2 v-bind:class="{key:value}">{
  {message}}</h2>
<h2 v-bind:class="{类名:boolean}">{
  {message}}</h2>
<h2 v-bind:class="{active:true,line:false}">{
  {message}}</h2>

boolean值为true的时候，类就被添加。
一般把boolean值放到data中

<h2 v-bind:class="{active:isActive,line:isLine}">{
  {message}}</h2> 

data: {
	message: 'nihao',
	isActive:true,
	isLine:true
},

如果过于复杂，可以放在一个methods或者computed中

<h2 v-bind:class="getClasses()">{
  {message}}</h2>
<button v-on:click="btnClick">按钮</button>

methods:{
	getClasses: function () {
		return { active: this.isActive, line: this.isLine };
	},
	btnClick:function(){
		this.isActive=!this.isActive;
	},
}

数组语法的含义是:class后面跟的是一个数组。

<h2 class="title" :class="['active','line']">{
  {message}}</h2>
<!-- 没有单引号，是变量 -->
<h2 class="title" :class="[active,line]">{
  {message}}</h2>

v-bind绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式。

我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

<h2 :style="{key:value}">{
  {message}}</h2>
<h2 :style="{属性名:属性值}">{
  {message}}</h2>
<!-- 如果不加单引号，则是变量 -->
<h2 :style="{fontSize:'50px'}">{
  {message}}</h2>
<h2 :style="{fontSize:finalSize,color:finalColor}">{
  {message}}</h2>
<h2 :style="getStyles()">{
  {message}}</h2>

data: {
	message: 'nihao',
	finalSize:'100px',
	finalColor:'red'
},
methods:{
	getStyles:function(){
		return { fontSize: this.finalSize, color: this.finalColor }
	}
}

v-bind ：id可改写为：id=“XXXX”

1.3.4、js表达式

vue支持使用表达式的方式，如

{
  {num+1}}
{
  {flag?"正确":"错误"}}
{
  {message.split("").revuerse().join("")}}

注意，表达式中只能绑定单个表达式！

1.4、渲染

1.4.1、条件渲染

所谓条件渲染，就是vue可用于做条件处理的方法，如v-if，v-show等，v-if在渲染页面时，若不为true，整个组件会被删除，而v-show则不是ÿ