浅学-Vue前端框架

最新推荐文章于 2024-04-01 01:20:41 发布

码农米格

最新推荐文章于 2024-04-01 01:20:41 发布

阅读量202

点赞数

分类专栏： Vue 文章标签： vue.js html html5

本文链接：https://blog.csdn.net/e_mmm0629/article/details/120267485

版权

本文介绍了Vue的基础概念，包括理解Vue实例、数据绑定、指令的使用，如文本插值、条件渲染、循环渲染等。此外，还探讨了计算属性与侦听器在Vue中的作用，适合Vue初学者入门学习。

摘要由CSDN通过智能技术生成

浅学-Vue前端框架

以下涉及到代码的部分，记得导入vue.js，涉及版本：vue 2.6 +
vue下载地址

<script type="text/javascript" src="js/vue.js"></script>

Attation：后文中的所有代码均经过测试可行，并在代码尾部附上结果图，可以参考自行修改对照。

理解

1、vue的使用需要生成一个vue的实例：

var vm = new Vue({
   
    ...
})

2、在vue对象实例化前存在的变量，在后续过程中所发生的属性的改变会同时影响vue中的相关对象与源对象。

var data = {
   data:0}

var vm = new Vue({
   
    data: data
})

vm.a == data.a // true
vm.a = 3
data.a // 3

data.a = 2
vm.a // 2

3、当出现在vue对象实例化后声明的对象需要影响到vue对象时，可以提前在vue对象中提前声明为空property。

var vm = new Vue({
   
    newText: '',
    newInt: 0,
    newBool: true,
    newLis: [],
    error: null
})

4、vue对象需要通过property：el 来绑定已有的元素，从而可以在该元素下生效。

	<body>
		<div id='app'> <!--(1)标明vm的数据作用域-->
			<a>{
  {a}}</a> <!--(3)-->
			<a>{
  {$data.a}}</a> <!--(4)-->
			<button type="button" v-on:click="onMouseClick">change it </button>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
     
			el: '#app', // (2)vm的数据作用域标识
			data:{
     
				a: 0
				},
			methods:{
     
				onMouseClick:function(){
     
					vm.a = 2
					vm.$data.a = 4
				}
			}
		})
	</script>

插值

1、常见的数据绑定形式：通过{ {}}双大括号的形式进行文本插值，岁绑定对象的更新而变化。
- 一次性插值：v-once，对标签添加此property，插值出的内容将不会在更新

    <a>msg:{
  {msg}}</a>
    
    <s

最低0.47元/天解锁文章

码农米格

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
浅学-Vue前端框架

浅学-Vue前端框架以下涉及到代码的部分，记得导入vue.js，涉及版本：vue 2.x<script type="text/javascript" src="js/vue.js"></script>理解1、vue的使用需要生成一个vue的实例：var vm = new Vue({ ...})2、在vue对象实例化前存在的变量，在后续过程中所发生的属性的改变会同时影响vue中的相关对象与源对象。var data = {data:0}var
复制链接

扫一扫