Vue（入门到转行）：初识_vue前端开发转行-CSDN博客

本文链接：https://blog.csdn.net/qq_57083240/article/details/127163399

什么是Vue

用于构建用户界面的渐进式JavaScript框架
构建用户界面：数据——>界面
渐进式：从底向上逐层应用（简单应用——>复杂应用）

作者：尤雨溪

Vue的安装

引入方式1：在script标签里面引入cdn

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

引入方式2：把vue.js文件放在项目文件夹中引入项目然后webpack打包

	import Vue from './vue.js'   //引入vue.js文件
	new Vue({
		el: "#app",
		data: {
			msg: "hello",
			age:"18"
			}
	})

引入方式3：HbuilderX编辑器直接生成

	HbuilderX 创建项目 选择 vue项目普通模式

引入方式4：（自己构建vue脚手架）用npm下载vue 引入到项目中然后webpack打包

1.新建项目  alipay 
2.初始化配置文件:npm init -y
3.下载依赖:
 npm i webpack@5.74.0 webpack-cli@4.10.0 vue-loader@17.0.0 @vue/compiler-sfc@3.2.37 webpack-dev-server@4.10.0  html-webpack-plugin@5.5.0 -D
	npm i vue -S 
4.webpack.config.js配置:
	const path = require('path');
	const {
		VueLoaderPlugin
		} = require('vue-loader');
		const HtmlWebpackPlugin = require('html-webpack-plugin');
		module.exports = {
				mode: 'production',
				watch: true,
				entry: './src/main.js',
		output: {
				filename: '[name].js',
				path: path.resolve(__dirname, 'dist'),
			},
		module: {
				rules: [{
				test: /\.vue$/,
				loader: 'vue-loader',
				}, ]
			},
		plugins: [
				new HtmlWebpackPlugin({
						template: path.join(__dirname, 'src/index.html'),
						filename: 'index.html'
				}),
				new VueLoaderPlugin(),],
		devServer: {
				open: true,
				port: 8080,
				hot: true,
				host: '192.168.2.60',
				compress: true,
			},
	}

5.项目配置文件 pakage.json文件中:
	scripts:{
		"dev": "webpack serve --config webpack.config.js"
	}

6.main.js文件:
	import { createApp } from 'vue'
	import App from './App.vue'
	createApp(App).mount('#app')
	document.body.innerHTML+="444"

7.模板html文件中
	<body>
		<div id="app"></div>
	<body>

8.启动:	npm run dev

引入方式5：使用官方脚手架的方式来构建项目环境

1.  cnpm install  @vue/cli -g 			//下载官方脚手架
2.  vue create app1 			 //项目名称
3. 接下来让你选择一些默认要生成的工具,不管直接回车
4. 进入项目文件夹: cd app1 		//进入项目文件夹,也可以直接在项目文件夹中打开终端
5. 启动:
npm run serve  			//生成的打包文件在内存中不会写入磁盘用于开发阶段
或者  
npm run build		 //生成的打包文件在dist中 用于项目上线

引入方式6：可视化项目管理方式

1.  cnpm install  @vue/cli -g
2.  vue ui
3. 打开的界面 中
4.创建项目==>填写项目名字,选择项目创建的目录 点击创建
5.等待它下载所有配置文件完毕  
6.任务中serve启动以后想当与启动了热更新服务器:默认localhost:8080(也可以点启动app直接帮我们打开localhost:8080)
7.如果把项目做完以后要上线,就启用build相当于webpack的打包,生成dist文件,注意:打包的路径是相对路径要改一下配置中的公共路径为:  ./ 然后点保存修改

引入方式7：HbuilderX 编辑器直接生成脚手架环境的方式

初识Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 创建一个容器 -->
    <div id="app">			<!-- 容器里面的代码被称为“Vue模板” -->
        <h1>名字：{{name}}</h1>
        <h1>年龄：{{age}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false   //阻止vue在启动时生成生产提示

        // 创建vue实例      引入vue后，全局有一个Vue()构造函数
        new Vue({
            el: "#app",		//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data: {			//data中用于存储数据,数据供el所指定的容器去使用
            	name:csdn,
            	age:18,	
            }
        })
    </script>
</body>
</html>

容器和Vue实例对象是一一对应关系
真实开发中只有一个Vue实例，并且会配合着组件一起使用
当data中的数据发生改变，则Vue模板中用到该数据的地方也会自动更新

Vue模板语法

语法分为两种，分别为:
插值语法(双大括号表达式) ：用于解析标签体内容
指令(以v-开头) ：用于解析标签（包括:标签属性、标签体内容、绑定事件…）

插值语法

普通插值表达式{{ XXX }}:

 XXX：js表达式（变量,运算表达式,函数调用,三目运算等），XXX对应 ==vue对象中的data中==的属性名或者methods中的方法名

指令

文本指令:

v-html ==>相当于innerHTML
v-text==>相当于innerText
v-pre==>插件表达式就被识别为文本,而不是js表达式
v-cloak==>加上这个属性的标签相当于在构建虚拟节点的时候就会有这个属性,等data的数据生成的时候,这个标签会自动去掉这个属性,可以利用这个特性来在css中把这个元素在加载初期写样式(隐藏)

例：
	<div v-html="p_html"></div>
	<div v-text="p_text"></div>
	<p v-pre>{{p_pre}}</p>
	<h1 v-cloak>{{msg+"666"}}</h1>

v-bind：（单向数据绑定）给元素绑定属性

标签中属性绑定js中变量:
标准写法:   v-bind:属性="data中对应表达式"
简写形式:   :属性="data中对应表达式"

例:
	标准写法:   <a v-bind:href="link">baidu</a>
	简写形式:   <a :href="link">baidu</a>
	标准写法:   <img v-bind:src="myimg">
	简写形式:   <img :src="myimg">

数据绑定

单向数据绑定（v-bind）：数据只能从data流向页面
双向数据绑定（v-model）：数据不仅能从data流向页面,还可以从页面流向data

	<body>
		<!--准备好一个容器-->
		<div id="app">
			单向数据绑定:<input type="text" v-bind:value="name"><br/>
			双向数据绑定:<input type="text" v-model:value="name">
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
		new Vue({
			el : " #app',
			data:{
				name:"CSDN'
			}
		})
	</script>

PS:

	1.双向绑定一般都应用在表单类元素上（如:input、select等)
	2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值.

el与data的两种写法

el的两种写法

	<body>
		<div id="app">
			<h1>{{name}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config . productionTip = false 
		const v = new Vue({
			//el: '#app',    //第一种写法
			data:{
				name:'CSDN'
				}
		})
		console.log(v)//Vue实例的原型
		v.$mount( " #app')  //第二种写法，挂载
	</script>

data的两种写法

	<body>
		<div id="app">
			<h1>{{name}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config . productionTip = false 
		new Vue({
			el : " #app',
		//data的第一种写法:对象式
			data:{
				name:"CSDN"
				}
		//data的第二种写法:函数式
			data(){					//data:function(){}
				console.log(this) //此处的this是Vue实例对象
				return{
					name:"CSDN"
					}
				}
			})
	</script>

MVC模型和MVVM模型

MVC

MVVM

	M:模型(Model) :对应data中的数据
	V:视图(View):模板
	VM:视图模型(ViewModel) : Vue 实例对象

	1.data中所有的属性,最后都出现在了vm身上。
	2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。