vue-1初步学习

最新推荐文章于 2024-04-29 04:54:33 发布

九八年的尾巴

最新推荐文章于 2024-04-29 04:54:33 发布

阅读量121

点赞数

分类专栏： Vue 文章标签： vue js javascript

本文链接：https://blog.csdn.net/q736317048/article/details/106334232

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

国内前端框架

特点一：可以把我们的界面划分成多个部分，把这些组件组成在一起，类似于拼图

二：支持双向绑定

vue官方文档：https://cn.vuejs.org/v2/guide/

引入js文件，可直接创建vue项目
在这里插入图片描述

响应式处理

调出控制台在控制台里对象名.数据名可直接更改值
在这里插入图片描述

for循环

在这里插入图片描述

函数绑定

<button v-on:click="f1">点击下</button>
			  methods:{//函数绑定
			  	f1:function(){
			  		alert("hello")
			  	}
			  }

双向绑定

			<input type="text" v-model="value" />
			<p>用户输入的值是：{{value}}</p>
			data里也要有value的空值 当输入框里的值发生更改 获取展示的值也会改变

组件化应用构建

			<body>
			//组件调用
			<c1></c1>
			</body>
			
			Vue.component('c1', { //定义组件 c1：组件名称
			  template: '<h1>这里是一个组件</h1>' //template：html中的代码 模板
			})

如何去更改组件里的值不是固定的
在这里插入图片描述

vue实例，也可以理解为一个对象

MVVM ：model view v-model

vue v = new Vue({
			  beforeCreate(){
			  	console.log("创建前")
			  },
			  created(){
			  	console.log("创建后")
			  }
})

后期需要和springboot项目进行结合

绑定标签中的属性

<style>.h1{font-size:10px}</style>
<h1 v-bind:class="className">绑定标签中得属性</h1>
data:{
className:"h1"
}

v-bind增加代码量，vue缩写

			<!--v-bind缩写-->
			<c1 :c_value="str"></c1>
			<h1 :class="className">绑定标签中的属性</h1>
			<button @click="f1">点击下</button>

九八年的尾巴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-1初步学习

国内前端框架特点一：可以把我们的界面划分成多个部分，把这些组件组成在一起，类似于拼图二：支持双向绑定vue官方文档：https://cn.vuejs.org/v2/guide/引入js文件，可直接创建vue项目响应式处理调出控制台在控制台里对象名.数据名可直接更改值for循环函数绑定<button v-on:click="f1">点击下</button> methods:{//函数绑定 f1:function(){
复制链接

扫一扫

专栏目录