Vue入门

最新推荐文章于 2024-02-17 00:07:28 发布

子非鱼*

最新推荐文章于 2024-02-17 00:07:28 发布

阅读量212

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zifeiyu3697/article/details/125489998

版权

1.vue模板语法

<body>
	<div id="app"> 
		<h1>{{msg}}</h1> 
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			msg:'hello,word!'
		}
	})
</script>
</body>

Vue语法与JavaScript一样写在script中，通过id选择器绑定DOM，在Vue中，只需要在el中对DOM的id进行挂载，可以简单的理解为钩子，el通过id="app"的特征钩住了<div>中的所有内容，这样我们就可以在Vue中实现对DOM中的操作.

data

Vue中的data用于声明我们所要使用的数据，这样操作有利于我们在维护或者操作文档的时候能够更容易的清晰某一板块所需要修改的数据，并且不需要直接对DOM进行操作，此时的数据与DOM是双向绑定的，当我们对data中所声明的数据进行修改时，DOM中同时也会发生响应式的变化。

内置指令

v-text指令 指令是带有 v- 前缀的特殊属性。 <div v-text="msg"> {{msg}}</div>

v-html指令 为了输出真正的 HTML，你需要使用v-html

<div v-html="raw"></div>
<div v-text="raw"></div>
<div >{{raw}}</div>

指令是带有 v- 前缀的特殊 attribute。指令属性值预期是单个 JavaScript 表达式

一些指令能够接收一个“参数"，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

我们可以使用v-bind指令给html标签动态的绑定属性。

v-bind可以简写为：

<button :disabled="canUse">按钮</button>
<div :title="title">你好帅</div>

v-if

v-if、v-show可以实现条件渲染，Vue会根据表达式值的真假条件来渲染元素。还有可以与v-if搭配的v-else、v-else-if指令，类似与JavaScript中的if-else、if-elseif-elseif。

<body>
	<div id="app"> 
		<input type="button" value="切换"  @click="go">
		<p v-if="jump">我跳~</p>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			jump:false
		},
		methods:{
			go:function(){
				this.jump=!this.jump;
			}
		},
	})
</script>
</body>

v-show

v-show用法与v-if大致一样，不同的是带有v-show的元素始终会被渲染并且保留在DOM中，v-show只是简单地切换元素的CSS属性display，当模板属性为true的时候，控制台显示为display:block；属性值为false的时候，控制台显示display:none。v-show不支持<tempalte>语法,也不支持v-else。

<body>
	<div id="app"> 
		<input type="button" value=""  @click="go">
		<p v-show="jump">我跳~</p>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			jump:false
		},
		methods:{
			go:function(){
				this.jump=!this.jump;
			}
		},
	})
</script>
</body>

v-show与v-if的区别

都是根据表达式的真假判断元素显示与隐藏

v-if只有在条件为真时，才对元素进行渲染，v-show无论初始条件为何，元素总会被渲染。

v-show初始开销更高，v-if的切换开销更高

频繁切换时用v-show；运行条件很少改变时用v-if

v-for

在Vue中，提供了v-for指令用来循环数据

<body>
	<div id="app">
		<ul>
		<li v-for="index in item">
			{{index}}
		</li>
    </ul>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
		item:[1,2,3,4,5]
		}
	})
</script>
</body>

在vue中,vueq遵循的是MVVM模式 ,他的特点:

编码简洁，体积小，运行效率高，适合移动/PC端开发

它本身只关注UI，可以引入其它第三方库开发项目

注意：

    想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
    root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
    root容器里的代码被称为Vue模板
    Vue实例与容器是一一对应的
    真实开发中只有一个Vue实例，并且会配合着组件一起使用
    {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
    一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新