vuejs的初学笔记

最新推荐文章于 2024-09-05 15:01:13 发布

knowledge...

最新推荐文章于 2024-09-05 15:01:13 发布

阅读量95

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45807622/article/details/112658086

版权

必须导入（在有网的情况下）

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

语法格式

var vm = new Vue({
  // 选项
})
代码的解释

vue属性

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

data数据的定义方式

data:{
		site:'大学课堂',
		url:'www.123.com'
	    },

2.通过引用

var shuju={xing:"黄",ming:"剧中",dianhua:"123456789"}

var v=new Vue({

          el:'#app',
          data:shuju 
})

Vue中data数据的改变和设置方式1

 	<body>
	        <div id="myapp001">
	                <h1>{{site}}</h1>
	                <h1>{{cs()}}</h1><!--调用函数-->
	        </div>
	        <script type="text/javascript">
	                var myvue=new Vue({
	                       el:'#myapp001',/*div 的id的值*/
	                        data:{
	                                site:'大学课堂',
	                                url:'www.123.com'
	                        },
	                        methods:{
	                             cs:function(){
	                             return "你好！"+this.url;
	                                }
	                        }
	                        
	                })
	        </script>
	        myvue.site="123";
	</body>

Vue中data数据的改变和设置方式2

<script type="text/javascript">
	var shuju={xing:"黄",ming:"剧中",dianhua:"123456789"}
	var v=new Vue({
		el:'#app',
		data:shuju 
	})
	shuju.xing="张";
	v.ming="三";
</script>

Vue中的系统属性的使用

指令：V-bind

判断v-if

循环v-for

绑定事件单项

v-on:click=" "

表单的双向绑定事件：v-model

	<div id="app">
	输入文本：<input type="text"v-model="message">{{message}}
	</div>
	<script>
	varvue=new Vue({
	el:'#app',
	data:{
	message:"狂神说java"
	}
	})
	</script>

下拉列表

	<div id="app">
	<select v-model="selected">
	<option value=""disabled>请选择</option>
	<option>A</option>
	<option>B</option>
	<option>C</option>
	</select>
	value:{{selected}}
	</div>
	<script>
	varvue=newVue({
	el:'#app',
	data:{
	selected:""
	}
	})
	</script>

Vue的组件

Vue.component(‘my-component-name’, { /* … */ })

<div id="app">
<!--组件：传递给组件中的props-->
<qinjiang v-for="iteminitems"v-bind:qin="item"></qinjiang>

</div>
<script>
//定义vue组件component
Vue.component("qinjiang",{
props:["qin"],
template:'<li>{{qin}}</li>'
});
varvue=newVue({
el:'#app',
data:{
items:["java","Linux","前端"]
}
})
</script>

网络通信

axios

vue的生命周期

从创建到销毁的过程，先加载模板在加载数据

计算属性

定义：计算出来的结果，保存在属性中-内存中运行：虚拟内存

<div id="app" >
 <p>currentTime1{{currentTime1()}}</p>
    <p>currentTime2{{currentTime2}}</p>
</div>
<script>
    var vue=new Vue({
        el:'#app',
        data: {
            message:"hello kuangshen"
        },
        methods:{//函数名调用
            currentTime1:function(){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{
            //直接调用属性
            //计算属性:methods、computed方法不能重名，重名之后，只会调用methods的方法
            currentTime2:function(){
                return Date.now();
            }
        }
    })
</script>

内容分发插槽slot

<div id="app" >
    <todo>
        <todo.title slot="todo.title":title="title">         </todo.title>
        <todo.items slot="todo.items" v-for="item in todoItems" :item="item"></todo.items>
    </todo>
</div>
<script>
    Vue.component("todo",{
        template: '<div>\
        <slot name="todo.title"></slot>\
        <ul>\
       <slot name="todo.items"></slot>\
        </ul>\
        </div>'
    });
    Vue.component("todo.title",{
        props:['title'],
        template:'<div>{{title}}</div>'
    });
    Vue.component("todo.items",{
        props:['item'],
        template:'<li>{{item}}</li>'
    });
    var vue=new Vue({
        el:'#app',
        data:{
            title:"秦老师列表",
            todoItems:['狂神说java','狂神说前端']
        }
    })
</script>