Vue框架的学习,从入门开始

太过爱你忘了你带给我的痛 2022-12-05 15:28 160阅读 0赞

## 脚本框架的搭建 ##

有两种方法,下面给出用包管理器创建的方法  
给出这两个链接作为安装的参考

> https://blog.csdn.net/han\_chuang/article/details/105413151

> https://blog.csdn.net/weixin\_43844158/article/details/89788002

安装完成之后创建的项目目录大概就是这个样子

![在这里插入图片描述][20200911180246387.png_pic_center]

## 1.Vue的介绍 ##

1.  介绍:Vue.js 可以说是MVVM 架构的最佳实践，是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁

2.优点:上手速度快、功能强大,双向数据绑定,组件开发

## 2. 模块语法 ##

1.v-html指令:要解析为html语言

<div { {name}}></div>
    
    <script type="text/application"> var vm = new Vue({ el: "#box", data: { name: 'hello' } }) </script>

2.v-html指令:要解析为html语言

<div v-html="name"></div>
    
    <script type="text/application"> var vm = new Vue({ el: "#box", data: { name: 'hello' } }) </script>

3.计算属性

<div v-html="">
    					{
       {name.substring(0,1).toUpperCase()+name.substring(1)}}
    	</div>
    
    
    <script type="text/application"> var vm = new Vue({ el: "#box", data: { name: 'hello' } }) </script>

1.  计算属性computed的应用

*computed和methods的区别??*\*  
computed会根据相关的依赖发生改变才会重新计算,如果没有改变会运行他的缓存

<div>
    					<p>我是计算属性computed {
       {changewordComputde}}</p>
    					<p>我是普通方法method {
       {changewordMethod()}}</p>
    					<p>我是计算属性computed {
       {changewordComputde}}</p>
    					<p>我是普通方法method {
       {changewordMethod()}}</p>
     </div>
    
    
    <script type="text/javascript"> var vm = new Vue({ el: "#box", data: { name: 'hello' }, methods: { changewordMethod: function() { return this.name.substring(0, 1).toUpperCase() + this.name.substring(1) } }, computed: { changewordComputde: function() { return this.name.substring(0, 1).toUpperCase() + this.name.substring(1) } }, /* input监听input值的改变 */ var vm2 = new Vue({ el: "#box2", data: { price: 100, number: 43, sum: 0 }, // 监听的 /* watch:{ price.function(newvue){ this.sum=newvue*this.number }, number.Function(){ this.sum=newvue*this.price } }, */ // computed是一个对象不是方法 computed:{ computedsum:function(){ return this.number*this.price } } }) </script>

## 3.class与style的绑定 ##

包括class样式和style样式

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>5.class与style的绑定</title>
    	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="box">
    			
    			<h2>Class样式</h2>
    			<p class="default" :class="isShow?'aaa':'bbb'">class样式</p>
    			
    			<p class="default" :class="{active:isShow,show:isShow}">对象的形式</p>
    			
    			<p class="default" :class="['active','show']">数组的形式</p>
    			
    			<h2>Style样式</h2>
    			<p class="default" :style="{ background:color}">style</p>
    			<p class="default" :style="obj">style2</p>
    			<p class="default" :style="[obj2,obj3]">数组语法</p>
    		</div>
    		<script type="text/javascript"> var vm=new Vue({ el:"#box", data:{ name:"xiaoming", isShow:true, color:"red", obj:{ background:"red", fontSize:"30px" }, obj2:{ background:"red" }, obj3:{ fontSize:"30px" } } }) </script>
    	</body>
    </html>

## 4.条件渲染 ##

<div id="box">
    			<p v-if="isCreated">我是if,执行了我</p>
    			<s v-else>我是else,执行了我</s>
    </div>
    	   <script type="text/javascript"> var vm=new Vue({ el:"#box", data:{ isCreated:true } }) </script>

## 5.列表渲染 ##

1.  v-for  
    in  
    of
2.  key  
    跟踪每个节点的身份,从而重用和重新排序现用的元素  
    理想的key值是每项都有的并且唯一的id值
3.  数组的更新检测  
    filter push…

<div id="box">
    			<ul>
    				
    				
    				<li v-for="(data,index) in datalist" :key="index">
    					
    					{
       {data}}
    					
    					{
       {index}}
       		        </li>
    			      
    			      {
       {data}}
    			</ul>
    		</div>
    		<script type="text/javascript"> var vm=new Vue({ el:"#box", data:{ datalist:["aaa","bbb","ccc","ddd"] } }) </script>

filter与v-bind实现双向数据绑定

<div id="box2">
    			<input type="text" v-model="mytext"/>
    			<ul>	
    				<li v-for="data in computerdatalist">	
    					{
       {data}}		
    			    </li>    
    			</ul>		
    		</div>
    
    <script type="text/javascript"> var vm2=new Vue({ el:"#box2", data:{ datalist:["aaa","bbb","ccc","ddd"], mytext:"" }, computed:{ computerdatalist:function(){ return this.datalist.filter(item=>item.indexOf(this.mytext)>-1) } } }) </script>

## 6.单文件组件 ##

用单文件框架的时候就需要用到脚手架,

[20200911180246387.png_pic_center]: /images/20221123/f19ba22302e041dc92ab453bd7e59323.png