第一天的vue，跟着我，一起学_# 最新稳定版 $ npm install vue-CSDN博客

本文介绍了Vue.js框架的基础知识，包括其背景、特点及基本使用方法。详细讲解了Vue的指令系统，如v-text、v-bind等，并对比了v-if与v-show的区别，适合初学者快速掌握Vue的核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue简介

官网

1. vue是一种渐进式JavaScript 框架，框架不止这一种，还有react  angular两种
2. 他的作者是尤雨溪，由于官网是中文比例占比最大的js框架官网，深受国人喜爱
3. 特点 
		1. 上手简单,api详细,生态插件丰富
		2. 脱胎于其他两种框架，所以可以结合angular 指令 react的组件和虚拟dom

使用方法

通过js文件进行引入使用

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

通过脚手架进行安
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。
NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。
同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

vue的基本框架(实例化)

var app = new Vue({
	//选择html
	el: "#app",
	//内容
	data: {
		"msg": "你好世界，你好vue！"
	}
})

vue的指令

v-开头特殊html属性
vue的指令连接了html模板与vue实例数据
指令的值是单个htm

v-text="5+8"
v-text="msg.length"
v-text="5>8?'大于':'小于8'"
v-text="msg.split('').reverse().join('')"

指令的参数:参数名

v-bind:title="msg"
v-bind:disabled="!can

vue的渲染指令

1.文本渲染指令

{{}}
v-text=“指令的值”
v-html=“含html的文本”

注意要点：v-text和v-html的优先级高于{{}}，即两个都有事高优先级会覆盖低优先级。他们都可以写一些简单的js，比如三元运算符。

2.属性渲染指令

v-bind:title=“msg” ////// :title=“msg”
格式为 v-bind:属性=“指令”,或者直接简写 :属性=“指令”

3.条件渲染指令

v-if 表达式为真,节点显示
v-else-if 多重条件
v-else 其他
v-show css方式显示与隐藏节点

<body>
		<div id="app">
			<h3>条件渲染指令 v-if</h3>
			<p v-if="isLog">现在是true状态</p>
			<p v-else>现在是false状态</p>
			<button @click="dj">点击</button>
			<hr />
			<input v-model="score" placeholder="你考了多少分啊"/>
			<p v-if="score>=90">优秀</p>
			<p v-else-if="score>=80">良好</p>
			<p v-else-if="score>=70">中等</p>
			<p v-else-if="score>=60">及格</p>
			<p v-else>重修</p>
			<p>v-if和v-show都是隐藏节点，v-show隐藏是通过css进行隐藏</p>
			<p>v-if是通过移除dom节点进行隐藏</p>
			<p>频繁切换用v-show 反之用v-if</p>
			<hr />
			<h3>v-show</h3>
			<p v-show="can">我是月薪过万的人</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					can:true,
					isLog:false,
					score:60
				},
				methods:{
					dj:function(){
						this.isLog = !this.isLog
					}
				}
			})
		</script>
	</body>