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 = '方法名'

vue

2.10轮播图




    
    
    


    

        
        
            
                {{ index +1 }}

vue

2.11v-model

https://cn.vuejs.org/v2/guide/forms.html
你可以用 v-model 指令在表单 、 及 <select> 元素上创建双向数据绑定。</code></pre>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <input type="text" v-model = 'text'>
        <h4>{{ text }}</h4>

    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>

    <script type="text/javascript">

        new Vue({
            el:"#app",
            template:``,
            data(){
                return {
                    text:'学习数据的双向绑定'
                }
            }
        });
    </script>

</body>
</html></code></pre><p><img src="/upload/otherpic58/112779.jpg" alt="vue"></p><h3>2.12v-model的实现过程</h3><pre><code><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <!-- v-model这个指令很好理解,其实它就是一个语法糖 (甜甜的) 它是oninput事件和绑定value的实现 -->
        <input type="text"  :value = 'text' @input = 'valueChange'>
        <h4>{{ text }}</h4>
    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <script type="text/javascript">

        new Vue({
            el:"#app",
            template:``,
            data(){
                return {
                    text:'alex'
                }
            },
            methods:{
                valueChange(event){
                    console.log(event.target.value);
                    this.text = event.target.value  
                }
            }
        });
    </script>
</body>
</html></code></pre>
<h3>2.13小回顾</h3><pre><code>v-text  v-html  {{}}: 对页面的dom进行赋值运算   相当与js中innerText innerHTML

v-if = 'true':
//创建
var oP =   document.createElement('p')  ;
oDiv.appendChild(op)

v-if = 'false'
//销毁
oDiv.removeChild(op)
v-show = 'true'
oDiv.style.display = 'block'
v-show:'true'
oDid.style.display = 'none'

v-bind:class
oDiv.className += ' active'

/*
渐进式的JavaScript框架
做加法和做减法:大部分的人觉得做加法简单,做减法难
vue这个框架 将 做减法的事情都给咱们做了(难的部分)
学习简单的部分就能实现复杂的dom操作
*/</code></pre>            
            
            
            <br>

            分享题目：vue
            <br>

            URL标题：<a href="http://mswzjz.cn/article/joshdd.html">http://mswzjz.cn/article/joshdd.html</a>

        </div>

    </div>

    <div class="other">

        <h3>其他资讯</h3>

        <ul>

            <li>

                    <a href="/article/dieophi.html">三种类型的css样式 css的三种样式形式</a>

                </li><li>

                    <a href="/article/dieohoj.html">linux命令行发消息 linux发送命令</a>

                </li><li>

                    <a href="/article/dieohsi.html">idea怎么连mysql idea怎么连接navicat</a>

                </li><li>

                    <a href="/article/dieoheo.html">android找茬源码 找茬小程序源码</a>

                </li><li>

                    <a href="/article/dieohco.html">linux查看音频的命令 linux音频播放器</a>

                </li>
        </ul>

    </div>

</div>

<footer>

    <div class="message">

        <div class="mess container">

            <p>免费获取网站建设与品牌策划方案报价</p>

            <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上四川攀枝花网站建设。</span>

            <form action="">

                <input type="text" class="ipt1" placeholder="联系人">

                <input type="text" class="ipt2" placeholder="联系电话">

                <textarea name="" id=""  placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。">

                提交需求



    

        

            

                联系我们

                028-86922220

                手机：13518219792

                地址：成都市太升南路288号锦天国际A幢1002号

                

                24小时服务热线：400-028-6601

            

            

                网站建设服务

                网页设计

                网站制作

                网站开发

            

            

                网站推广服务

                营销网站建设

                百度快速排名

                整站网站推广

            

            

                网站运维服务

                基础维护

                网站改版

                网站维护

            

            

                FOLLOW US

                

                

                    微信二维码

                    微信二维码

                

            

        

        

            友情链接：

            仿古建筑设计   成都做网站   网站建设推广   成都做网站   成都SEO优化公司   400电话申请   免备案虚拟主机   成都广告制作   网站seo优化   B2C电商系统   
        

    

    

        

            

                Copyright © 2022  四川攀枝花网站建设公司     四川攀枝花网站建设公司-选我们！四川专业的攀枝花网站制作公司！

            

            

                All Rights Reserved 版权所有 蜀ICP备2024097831号-1

网站建设知识

vue

1.ES6常用语法

1.1什么是ES6

1.2var,let,constant

1.2.1var

1.2.2let

1.2.3const

1.3模板字符串

1.4箭头函数

1.5对象的单体模式

1.6类的使用

2.vue

2.1vue的介绍

2.2前端框架和库的区别

2.3nodejs

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

{{ msg }}

{{ msg+ 'hello'}}

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

{{'hello'}}

{{ {name:'role'} }}

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

2.6v-if和v-show

2.7v-for

{{index}}--菜名:{{item.name}}

2.8v-bind

2.9v-on事件绑定

{{msg}}

2.10轮播图

2.11v-model

联系我们

网站建设服务

网站推广服务

网站运维服务

FOLLOW US