Vue学习日记一

最新推荐文章于 2022-04-27 20:26:32 发布

浅语千寻

最新推荐文章于 2022-04-27 20:26:32 发布

阅读量141

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34368334/article/details/102080353

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

VUE学习日记一

VUE学习日记一

1.1、Vue核心

1.1.1Vue官网

英文官网: https://vuejs.org/

中文官网: https://cn.vuejs.org/

1.1.2.介绍描述

1)渐进式的JavaScript框架

2)作者:尤雨溪(华裔前Google工程师)

3)作用：动态构建用户界面

1.1.3.Vue特点

1)遵循MVVM模式

2)编码简洁、体积小、运行效率高、适合PC端开发

3)它本身只关注Vue插件或第三方库

1.1.4.与其他框架的关联

1)借鉴angular的模板和数据绑定技术

2)借鉴react的组件化和虚拟DOM技术

1.1.5.Vue的扩展插件

1）vue-cli:vue的脚手架

2）vue-resource（axios）:ajax请求

3）vue-router：路由

4）vuex：状态管理

5）vue-lazyload：图片懒加载

6）vue-scroller:页面滑动相关

7）mint-ui:基于vue的UI组件库（移动端）

8）element-ui：基于vue的UI组件库（PC端）

1.2 Vue的简单使用

1.2.1编码

<!DOCTYPE html>
	<html lang="en"><head>    
    <meta charset="UTF-8">   
    <title>01_HelloWorld</title></head>
   <body>  
       <!-- 1、引入Vue.js       
			2、创建Vue对象        
			el:指定根element        
			data:初始化数据Vue Model        
			显示数据:{{xxx}}        
			理解Vue的MVVM实现    
		-->    
       <div id="app">        
           <input type="text" v-model="username"/>        
           <p>Hello, {{username}}</p>   
       </div>
       <script type="text/javascript" src="../js/vue.js">
       </script>
       <script type="text/javascript">   
       //创建Vue实例    
       const vm = new Vue({//配置对象        
           el:"#app",//element:选择器        
           data:{//数据(model)            
               username:'SB'        
           }    
       });
       </script>
    </body>
</html>

1.2.3使用Vue开发者工具

https://www.cnblogs.com/shamo89/p/10115035.html

如果安装完后打开本地文件Vue是灰色的

https://blog.csdn.net/qq_41138935/article/details/100786073

扩展工具——》Vue——》勾选允许访问文件网址。

1.2.4、理解Vue的MVVM

http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

1.3模块化语法

案例

<!DOCTYPE html>
<html lang="en">
    <head>    
        <meta charset="UTF-8">  
        <title>模板语法测试</title></head><body>
    <!--    1.模板的理解:       
				动态html页面        
				包含一些JS语法代码 
			2.双大括号表达式        
				语法:{{exp}} 
				功能:向页面输出数据        
				可以调用对象的方法 
			3.强制数据绑定
				功能:指定变化的属性值     
				完整写法：
						v-bind:xxx='yyy'
				简结写法：
						:xxx='yyy' 
			4.指令二:绑定事件监听     
					功能绑定指定事件的回调函数       
					完整写法:       
							v-on:click='xxx'       
					简结写法:          
							@click='xxx'   
		-->
    <div id="app">  
        <h2>1.双大括号表达式</h2>   
        <p>{{msg}}</p><!--textContent-->
        <p>{{msg.toUpperCase()}}</p>  
        <p v-text="msg"></p><!--textContent-->  
        <p v-html="msg"></p><!--innerHTML--> 
        <h2>2.指令一:强制数据绑定</h2>   
        <img src="imgUrl"><br/>
        <img v-bind:src="imgUrl">
        <img :src="imgUrl">
        <h2>3.指令二:绑定事件监听</h2>  
        <button v-on:click="test">点击test1</button> 
        <button @click="test">点击test1</button>    
        <button @click="test2(msg)">点击test2</button>
    </div>
    <script type="text/javascript" src="../js/vue.js "></script>
    <script type="text/javascript"> 
        new Vue({       
            el:'#app',       
            data:{     
                msg: '<a href="http:/www.baidu.com">I Will Back</a>', 
                imgUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2029082490,2363810538&fm=26&gp=0.jpg' 
            },
            methods:{
                test(){    
                    alert("哇哈哈")   
                },        
                test2(content){
                    alert(content)    
                } 
            }
        }) ;
    </script>
    </body>
</html>

1.4计算属性和监视

<!DOCTYPE html>
<html lang="en">
    <head>    
        <meta charset="UTF-8"> 
        <title>Title</title></head><body>
    <!--1、计算属性    
			在computed属性对象中定义计算属性的方法    
			在页面中使用{{方法名}}来显示计算结果
		2、监视属性:   
			通过vm对象的$watch()或watch配置来监视指定的属性    
			当属性变化时，回调函数自动调用，在函数内部进行计算
		3、计算属性高级：  
			通过getter/setter实现对属性数据的显示和监视   
			计算属性存在缓存，多次读取只能进行一次getter计算
	-->   
    <div id="demo">
        姓:<input type="text" placeholder="First Name" v-model="firstName"><br>
        名:<input type="text" placeholder="Last Name" v-model="lastName"><br>
        姓名1(单向):<input type="text" placeholder="Full Name1" v-model="fullName1"><br>           姓名2(单向):<input type="text" placeholder="Full Name2" v-model="fullName2"><br>           姓名3(双向):<input type="text" placeholder="Full Name3" v-model="fullName3"><br>        	<p>{{fullName1}}</p>
       <p>{{fullName1}}</p>
       <p>{{fullName1}}</p>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script> 
    <script type="text/javascript">
        const vm =  new Vue({
            el:"#demo",
            data:{  
                firstName:'A',
                lastName:'B',
                // fullName1:'A B'
                fullName2:'A B'  
            },
            //什么时候执行:初始化显示/相关的data数据发生改变
            computed:{
                fullName3:{
                    //回调函数 1.你定义的。2.你没调用 3.但它执行了
                    //2.什么时候调用 2.做什么 
                    // 得到当前属性的值
                    get(){  
                        return this.firstName + ' ' + this.lastName 
                    },
                    //当属性值改变的时候回调，更新相关属性的数据
                    set(value){
                        const names =  value.split(' ')
                        this.firstName = names[0];
                        this.lastName = names[1]; 
                    } 
                },
                fullName1(){
                    //计算属性中的一个方法，方法的返回值为属性的值  
                    console.log('fullName1()') 
                    return this.firstName + ' ' + this.lastName;
                } 
            },
            watch:{//配置监视 
                firstName: function(value){//firstName发生了变化                    		
                    console.log(this);//就是vm对象
                    this.fullName2 = value + ' ' + this.lastName;
                } 
            }
        })
        vm.$watch('lastName',function(value){            //更新fullName2
            this.fullName2 = this.firstName + ' ' + value  
        })   
    </script>
    </body>
</html>

浅语千寻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习日记一

文章目录VUE学习日记一1.1、Vue核心1.1.1Vue官网1.1.2.介绍描述1.1.3.Vue特点1.1.4.与其他框架的关联1.2 Vue的简单使用1.2.1编码1.2.3使用Vue开发者工具1.2.4、理解Vue的MVVM1.3模块化语法1.4计算属性和监视VUE学习日记一1.1、Vue核心1.1.1Vue官网英文官网: https://vuejs.org/中文官网: http...
复制链接

扫一扫

专栏目录