VUE的学习从入门到拿捏（一）-CSDN博客

本文链接：https://blog.csdn.net/m0_58856160/article/details/123120709

前言

概述： Vue是一款前端渐进式框架，简单，高效，生态丰富（插件多）可以很大的提高前端开发效率。是主流的三大框架之一。

一，Vue导入

1，直接用script标签引入

可以在 https://unpkg.com/vue@next 下载vue文件。

下载好vue.js，导入到程序中，通过<script src="js/vue.js"></script>引用vue.js

二，Vue创建应用实例

创建一个新的应用实例

<div id="app">
    <input type="text" v-model="msg" />
    <p>{{msg}}</p>
</div>
		<script type="text/javascript">
			//创建一个app 应用
			const app = Vue.createApp({
				//定义数据 data
				data(){
					//返回msg
					return {msg:"你好vue"}
				}
			})
			//把app实例挂载到#app节点
			var vm = app.mount("#app")
		</script>

三，Vue模板语法-文本渲染

1.什么是Vue.js指令？
指令（Directive）是特殊的带有v- 前缀的。指令的属性值预期是单个 JavaScript 表达式

2.作用？
当表达式的值改变时，将某些行为应用到DOM上

书写位置：任意HTML元素的开始标签内

注意：一个开始标签内可以写入多个指令，多个指令间使用空格分隔

文本渲染：

{{}}语法

div> {{msg}}</div>

<script>

const app = Vue.createApp({

  data() {return { msg: ‘你好Vue3’ } }

})

const vm = app.mount('#app')
    </script>

{{}}每个绑定都只能包含单个表达式，下面这些都可以生效

             <span>{{msg}}</span>
           <span>{{1+3}}</span>
           <span>{{5>8?"大于":"小于"}}</span>
           <span>{{msg.length}}</span>
           <span>{{msg.split('').reverse().join('')}}</span>
           <span>{{}}</span>

v-text ：是用于操作纯文本，它会替代显示对应的数据对象上的值

<div id="app">
			<p v-text="msg"></p>
		</div>
		<script type="text/javascript">
		// 把app里面的内容成为模板
		// v-开头的属性成为 模板的指令
		// 通过指令把html和js联系在一起
			Vue.createApp({
				data() {
					return {
						msg: "太阳当空照"
					}
				}
			}).mount("#app")
		</script>

v-html：用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出

<div id="app">
			<span v-html="msg"></span>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return {
						msg:"太阳<h1>当</h1>空照"
					}
				}
			}).mount("#app")
		</script>

v-bind：响应并更新标签DOM特性

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

可以简写为： <button :disabled="canUse">按钮</button>

        <div id="app">
			<button v-bind:disabled="canUse">按钮1</button>
			<button :disabled="!canUse">按钮2</button>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return {
						canUse:false,
					}
				}
			}).mount("#app")
		</script>

条件渲染：

v-if
v-else-if

只能满足一个：

<div id="app">
			<!-- 只能满足一个 -->
			<p v-if="islog">hello</p>
			<p v-else>hi</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return {islog:true}
				}
			}).mount("#app")
		</script>

v-if
v-else-if 判断多层条件，必须跟v-if成对使用；
v-else

多重条件渲染：

<div id="app">
			<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>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{score:85}
				}
			}).mount("#app")
		</script>

v-show与v-if：

他们都谁条件渲染指令，v-show是为DOM设置css的style属性。

v-if 是动态在DOM内添加或删除DOM元素

<div id="app">
            <p v-if="can">我会显示</p>
            <p v-show="can">我也会显示</p>
        </div>
        <script type="text/javascript">
            Vue.createApp({
                data(){
                    return{can:true}
                }
            }).mount("#app")
            //v-show是通过css方法隐藏节点
            //v-if直接移除节点方式隐藏
            //频繁切换显示与隐藏 v-show
            //偶尔切换显示隐藏用 v-if
        </script>

v-for：循环指令

<div id="app">
			<ul>
				<li v-for="item in list">{{item}}</li>
			</ul>
			
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{list:["A","B","C"]}
				}
			}).mount("#app")
			
			
		</script>