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://chengdu.cdxwcx.cn/article/joshdd.html">http://chengdu.cdxwcx.cn/article/joshdd.html</a>
                </div>
            </div>
        </div>
        <!--左边end-->
        <!--右边begin-->
        <div class="news_r">
            <div class="news_t"><h2 class="h2">其他资讯</h2></div>
            <div class="news_ul3">
                <ul>
                    <li>
                            <a href="/article/dhpoch.html">
                                <h3 class="h3">小程序开发的基础知识点-创新互联</h3>
                            </a>
                        </li><li>
                            <a href="/article/dhpopc.html">
                                <h3 class="h3">phpmyadmin打不开404的解决方法-创新互联</h3>
                            </a>
                        </li><li>
                            <a href="/article/dhpopo.html">
                                <h3 class="h3">Oracle11g监听器日志listener.log文件过大处理-创新互联</h3>
                            </a>
                        </li><li>
                            <a href="/article/dhpojo.html">
                                <h3 class="h3">java中的域是什么？怎么使用？-创新互联</h3>
                            </a>
                        </li><li>
                            <a href="/article/dhpogj.html">
                                <h3 class="h3">磁盘显示使用驱动器中的光盘之前需要格式化的数据寻回方法-创新互联</h3>
                            </a>
                        </li>                </ul>
            </div>
        </div>
        <!--右边end-->
        <div class="c_l"></div>
    </div>
</div>
<!--正文end-->
<!--尾部begin-->
<!--尾部begin-->
<footer>
    <div class="f_bg">
        <div class="wrap">
            <div class="links">
                <h2 class="h2">甜橘子解决方案<a href="/solution/" title="更多" class="more">更多+</a></h2>
                <ul>
                    <li><a href="/solution/xiaochengxu.html" title="小程序定制解决方案">小程序定制解决方案</a></li>
                    <li><a href="/solution/qiyewz.html" title="企业网站建设解决方案">企业网站建设解决方案</a></li>
                    <li><a href="/solution/menhuwz.html" title="行业门户网站建设解决方案">行业门户网站建设解决方案</a></li>
                    <li><a href="/solution/yingxiaowz.html" title="营销型网站建设解决方案">营销型网站建设解决方案</a></li>
                    <li><a href="/solution/waimaowz.html" title="外贸网站建设解决方案">外贸网站建设解决方案</a></li>
                    <li><a href="/solution/pingpaiwz.html" title="品牌形象网站建设解决方案">品牌形象网站建设解决方案</a></li>
                    <li><a href="/solution/dianziwz.html" title="数码、电子产品网站建设解决方案">数码、电子产品网站建设解决方案</a></li>
                    <li><a href="/solution/jituanwz.html" title="集团、上市企业网站建设解决方案">集团、上市企业网站建设解决方案</a></li>
                    <li><a href="/solution/dichanwz.html" title="房地产、地产项目网站建设解决方案">房地产、地产项目网站建设解决方案</a></li>
                    <li><a href="/solution/zhubaowz.html" title="珠宝高端奢侈品网站建设解决方案">珠宝高端奢侈品网站建设解决方案</a></li>
                </ul>
            </div>
            <div class="links w2">
                <h2 class="h2">我们的实力<a href="/about/" title="更多" class="more">更多+</a></h2>
                <ul>
                    <li>10年专业互联网服务经验</li>
                    <li>成都高端建站设计团队</li>
                    <li>资深行业分析策划</li>
                    <li>B2C营销型网站建设者</li>
                    <li>前沿视觉设计、研发能力</li>
                    <li>前端代码深度符合SEO优化</li>
                    <li>成都市高新技术企业证书</li>
                    <li>具有完备的项目管理</li>
                    <li>完善的售后服务体系</li>
                    <li>深厚的网络运营经验</li>
                    <li>时刻新技术研发能力</li>
                    <li>16个网站系统软件著作权</li>
                </ul>
            </div>
            <div class="f_div2_r">
                <h2 class="h2">关于甜橘子<a href="/about/" title="更多" class="more">更多+</a></h2>
                甜橘子网站设计，为客户量身定制各类网站建设业务，包括企业型、电子商务型、行业门户型、品牌建立型等各类网站，实战经验丰富，成功案例众多。以客户利益为出发点，甜橘子网站制作为客户规划、定制符合企业需求、带有营销价值的建站方案，提供从网站前期定位分析策划到网站界面设计... </div>
            <div class="c_l"></div>
        </div>
        <div class="wrap">
            <div class="f_div3"> <span class="l">成都网站制作案例©2020 甜橘子设计 版权所有  | <a href="http://chengdu.cdxwcx.cn" target="_blank">甜橘子网站设计</a><a href="http://chengdu.cdxwcx.cn" target="_blank">chengdu.cdxwcx.cn</a></span> <span class="r"><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备11025516号</a></span> </div>
        </div>
    </div>
</footer>
<!--尾部end-->
<script language="javascript" src="/Public/Home/js/foot.js"></script>
<!--尾部end-->
<!--侧边栏begin-->
<div class="side">
    <ul>
        <li id="qqonline_xbceo"><a href="tencent://message/?uin=631063699&Site=&Menu=yes"><i class="bgs1"></i>QQ咨询</a></li>
        <li class="shangqiao"><a href="tencent://message/?uin=532337155&Site=&Menu=yes" title="在线咨询">
            <div><i class="bgs2"></i>在线咨询</div>
        </a></li>
        <li class="sideewm"><i class="bgs3"></i>官方微信
            <div class="ewBox"></div>
        </li>
        <li class="sideetel"><i class="bgs4"></i>联系电话
            <div class="telBox">
                <dd class="bgs1"><span>座机</span><a href="tel:028-86922220" target="_blank">028-86922220</a></dd>
                <dd class="bgs2"><span>手机</span><a href="tel:13518219792" target="_blank">13518219792</a></dd>
            </div>
        </li>
        <li class="sidetop" onClick="goTop()" id="sidetop"><i class="bgs6"></i>返回顶部</li>
    </ul>
</div>
<script type="text/javascript">
    $('.sideewm').hover(function(){
        $('.ewBox').stop().fadeIn();
    },function(){
        $('.ewBox').stop().fadeOut();
    });
    $('.sideetel').hover(function(){
        $('.telBox').stop().fadeIn();
    },function(){
        $('.telBox').stop().fadeOut();
    });
    $(".con_id img").each(function(){
        var src = $(this).attr("src");    //获取图片地址
        var str=new RegExp("http");
        var result=str.test(src);
        if(result==false){
            var url = "https://www.cdcxhl.com"+src;    //绝对路径
            $(this).attr("src",url);
        }
    });
</script>
<!-- WPA start -->
<!-- WPA end -->
<!--侧边栏end-->
</body>
</html>

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

首页

网站建设

网站制作案例

解决方案

网站设计报价

网站制作动态

关于我们

联系我们

成都网站建设设计将想法与焦点和您一起共享

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

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

成都网站建设设计 将想法与焦点和您一起共享

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

成都网站建设设计将想法与焦点和您一起共享