资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

vue

1.ES6常用语法

1.1什么是ES6

ECMAScript 6 简称ES6, 在2015年6月正式发布~  ECMAScript 是JavaScript语言的国际标准。
参考文献：http://es6.ruanyifeng.com/

1.2var,let,constant

说明，在js中，一个{}就属于一个作用域。

1.2.1var

使用var声明变量，存在两种现象
1.因为变量提升，导致var声明的变量属于全局作用域。
2.var声明的变量存在覆盖现象

vue

创新互联公司专注于企业成都营销网站建设、网站重做改版、淄博网站定制设计、自适应品牌网站建设、H5场景定制、商城网站定制开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为淄博等各大城市提供网站开发制作服务。




    
    Title

vue

1.2.2let

let声明变量
1.属于局部作用域
2.没有覆盖现象



    
    Title

vue

1.2.3const

1.const声明的是常量,一旦声明 不可修改
2.const声明的常量属于局部作用域



    
    Title

vue

1.3模板字符串

tab键上面的反引号
如果说你要拼接一串字符串,那么不需要咱们直接的+去拼接,使用反引号来拼接,拼接的变量使用${变量名}
函数的书写

vue

1.4箭头函数

function(){} ==== ()=>{}

箭头函数的使用带来的问题:
    1.使用箭头函数 this的指向发生了改变
    2.使用箭头函数 arguments不能使用

vue

1.5对象的单体模式

fav(){             
}

等价于:
function fav(){
}

等价于
var fav = function(){  
}

vue

1.6类的使用

#es6中创建对象的方式 使用class
class Person{

    constructor(name,age){
    this.name = name;
    this.age = age;
    }

    showName(){
    alert(this.name)
    }

};

var p2 = new Person('张三',20);
p2.showName();

vue

2.vue

2.1vue的介绍

渐进式的JavaScript框架

    vue           react            angualr

    作者:尤雨溪    facebook         谷歌公司
        官方文档：https://cn.vuejs.org/

2.2前端框架和库的区别

功能上的不同:
jquery库：包含DOM(操作DOM)+请求，就是一块功能。
art-template库：模板引擎渲染，高性能的渲染DOM    (我们后端的一种模板  跟python的模板类似)
框架：大而全的概念，简易的DOM体验+请求处理+模板引擎
在KFC的世界里，库就是一个小套餐，框架就是全家桶。

代码上的不同:
一般使用库的代码，是调用某个函数或者直接使用抛出来的对象，我们自己处理库中的代码。
一般使用框架，其框架本身提供的好的成套的工具帮我们运行我们编写好的代码。

框架的使用:
一般使用库的代码，是调用某个函数或者直接使用抛出来的对象，我们自己处理库中的代码。
一般使用框架，其框架本身提供的好的成套的工具帮我们运行我们编写好的代码。

2.3nodejs

1.    去官网https://nodejs.org/en/download/ 下载 安装(傻瓜式安装)
2.    打开终端 cmd  :  执行`node -v`   如果出现版本号，证明安装node成功 ，跟安装python雷同

3.    下载完node之后，会自带包管理器 npm，好比 是python中 pip3包管理器。pip3 install xxx
4.    使用npm  

        1.要初始化npm的项目 :  

        npm init  --yes 自动生成一个package.json文件
             {
              "name": "vue_lesson",
              "version": "1.0.0",
              "description": "这是我的vue的第一个项目",
              "main": "index.js",
              "scripts": {
                "test": "echo \"Error: no test specified\" && exit 1"
              },
              "author": "mjj",
              "license": "ISC",
              "dependencies": {
                "vue": "^2.5.16"
              }
            }
         2.npm install vue --save
            npm install jquery --save

         3.下载包  npm  uninstall vue --save

         4.下载所有的依赖包 npm install

vue
vue
vue
vue
vue
vue

2.4vue的起步-引用和双大括号

- 引包:    
- 创建实例化对象

new Vue({
el:'#app',//目的地
data:{
    msg:"hello Vue"
}
});
/*
    {{}}: 模板语法插值
    {{变量}}
    {{1+1}}
    {{'hello'}}
    {{函数的调用}}
    {{1==1?'真的':'假的'}}
*/



    
    


    

        
        
{{ msg }}


        
{{ msg+ 'hello'}}


        
{{1< 1 ? '真的':'假的'}}

        
        
{{'hello'}}


        
{{'hello world'.split('').reverse().join('')}}

        
{{ {name:'role'} }}

vue
vue

2.5指定系统v-text,v-html

v-text 等价于 {{}}   实现原理:innerText
v-html  实现原理: innerHTML

vue
vue

2.6v-if和v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。




    
    
    



    

        

        

        
v-show即使为false,标签也会创建

        

            此值大于0.5
        

        

            此值小于0.5

vue

2.7v-for

//保存数组或者对象 格式
v-for = '(item,index) in menuList'
v-for = '(value,key) in object'
//item指的是数组中每项元素



    
    
    



    

        
    
            
  • 
                
    {{index}}--菜名:{{item.name}}
    
                
    价格{{item.price}}
    
            
    • 
        

        
    
            
  • 
                {{key}}--{{value}}
            
    •

vue

2.8v-bind



    使用v-bind:class = '{}||[]||变量名||常量' 对我们的页面中标签的属性进行绑定 所有的属性都可以进行绑定,
    注意只要使用了v-bind 后面的字符串一定是数据属性中的值

vue

2.9v-on事件绑定

// 1.事件源 2.事件  3.事件驱动程序

vue中使用v-on:click对当前DOM绑定click事件 注意:所有的原生js的事件使用v-on都可以绑定

v-if和v-on 来对页面中DOM进行操作

v-bind:class和v-on对页面中DOM的样式切换

v-bind和v-on

在vue中它可以简写: v-bind:         
:class 等价于 v-bind:class   
:src 等价于v-bind:src
:id 等价于v-bind:id
v-on:click   等价于 @click = '方法名'



    
    
    


    

        
{{msg}}

vue

2.10轮播图




    
    
    


    


        
        
    
            
  • 
                {{ index +1 }}
            
    •

vue

2.11v-model

https://cn.vuejs.org/v2/guide/forms.html
你可以用 v-model 指令在表单 、