Vue如何导入Jquery和Jquery的第三方插件,Vue导入Jquery和Jquery的第三方插件。创建二个jquery-vendor.js文件

制造贰个jquery-vendor.js文件

Vue(适合运动端的项目,特点小巧,不包容ie)
https://cn.vuejs.org(官网)

import $ from 'jQuery';
console.log($);
window.$ = $;
window.jQuery = $;
export default $;

import $ from ‘jQuery’;

基础代码(注明式渲染)

Vue.js 的宗旨是二个同意利用轻易的模板语法来评释式地将数据渲染进 DOM
的系统:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<body>
   <div id="app">
       {{message}}
   </div>
<script>
    window.onload= function () {
        var app=new Vue({
            el:'#app',
            data:{
                message:'Hellobejing'
            }
        })
    }
</script>
</body>
</html>

大家已经打响创立了第二个 Vue
应用!看起来那跟渲染二个字符串模板特别周边,不过 Vue
在悄悄做了大气职业。以后数量和 DOM
已经被确立了关乎,全体东西都以响应式的。大家要怎么确认呢?张开你的浏览器的
JavaScript 调整台 (就在那个页面展开),并修改 app.message
的值,你将见到上例相应地换代。
除去文本插值,大家还足以像这么来绑定元素天性:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<body>
  <div id="app">
    //简写v-bind:title 可以写成:title
        鼠标悬停此处查看动态绑定提示信息

  </div>

<script>
var app=new Vue({
    el:'#app',
    data:{
        message:'页面加载于'+new Date().toLocaleString()
    }
})
</script>
</body>
</html>

 //class宇style是特例  两者绑定的方式相同举例如下(注意复合样式,采用驼峰命名法)
//第一种方法
data:{
      c:{color:'red'},
      b:{backgroundColor:'blue'}
    }
<p :style="[c,b]">文字</p>

//第二种方法
  data:{
    json:{
        color:'red',
        backgroundColor:'green'
     }
}
<div class="box">
    <p :style="json">这是个文字</p>
</div>

此地我们遭遇了一点新东西。你看到的 v-bind 天性被称为指令。指令带有前缀
v-,以表示它们是 Vue 提供的格外性状。只怕你已经猜到了,它们会在渲染的
DOM 上应用特别的响应式行为。在此地,该指令的情致是:“将以此成分节点的
title 特性和 Vue 实例的 message 属性保持一致”。

导入JQuery,并赋值给window对象,使其成为三个全局变量。

console.log($);//用来令你询问在那之中都以哪些,之后记得删除或注释掉

亚洲成ca88,双向数据绑定

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 </head>
<script src="./lib/vue%20(1).js"></script>
<body>
<div id="box">
    <input type="text" v-model="msg">
    <br/>
    {{msg}}
</div>
</body>
<script>
    window.onload= function () {
        var vm=new Vue({
            el:'#box',//可以挂在到Class 或者id选择器或者标签
            data:{
                msg:'宝剑锋从磨砺出,梅花香自苦寒兰'
            }
        })
    }
</script>
</html>

在vue组件做如下引用

window.$ = $;

组合案例:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="box"></div>

<script>
    var vm=new Vue({
        el:'#box',
        template:`
        <div>
        <ul>
             <li>{{text1}}</li>
             <li>{{text2}}</li>
        </ul>
       <input type="text" v-model="text2">
        </div>
        `,
        data:{
            text1:'abc',
            text2:'123'
        }
    })
</script>

</body>
</html>
import $ from './assets/jquery-v';
import 'bootstrap-material-design'; 
//调用初始化
$(function(){
 $.material.init();
});

window.jQuery = $;

v-for

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
   var App={
        template:`
        <div>
       数组
        <ul>
            <li v-for="(hero,index) in heros" :key="index">
                {{hero.name}} {{index}}
            </li>
        </ul>
        对象
        <ul>
            <li>值 | key | 索引</li>
            <li v-for="(value,key,index) in person ":key="index">
                {{value}}{{key}}{{index}}
            </li>
        </ul>
    </div>
        `,
        data: function () {
            return{
                heros:[{id:1 , name:'小京京'},{id:2 , name:'小凯文'},{id:3 , name:'小宝宝'}],
                person:{
                    a:1,
                    b:2
                }
            }
        }
    }
    new Vue({
        el:'#app',
        render: function (c) {
            return c(App);
        }
    })
</script>
</body>
</html>
//vue是根据当前指定值使用一定的算法,计算,算出一个元素的唯一标识,给定key,则节省了运算标识的消耗.

注意:

export default$;

拍卖用户输入

为了让用户和您的接纳举行交互,大家能够用 v-on
指令增加贰个事变监听器,通过它调用在 Vue 实例中定义的秘籍:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script>
window.onload= function () {
    var app=new Vue({
        el:'.box',
        data:{
          msg:'helloword'
        },
        methods:{
            reversemsg:function(ev){
                this.msg=this.msg.split('').reverse().join(''),
                console.log(ev.clientX)
            }
        }
    })
}
</script>
<body>
<div class="box">
    <p>{{msg}}</p>
    <button  v-on:click="reversemsg($event)">反转信息</button>   //v-on:click可以简写成为@click
    //@click.stop(阻止冒泡) 或者ev.cancelBubble=true;
   //@click.prevent(阻止默认事件)或者ev.preventDefault();
</div>
</body>
</html>

1. 只好够在vue的零件中援用

导入JQuery,并赋值给window对象,使其成为多少个全局变量。

键盘事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script>
window.onload= function () {
    var app=new Vue({
        el:'.box',
        data:{
          msg:''
        },
        methods:{
            show:function(ev){
                alert("回车键被敲击了")
            }
        }
    })
}
</script>
<body>
<div class="box">
    <input type="text" @keyup.13="show">
    //@keydown.enter  后面可以是键码或者是具体的名称
</div>
</body>
</html>

2.借使在main.js中引进jquery.js是Ok的,但这种情状下无论是在mian.js只怕是vue组件中引进jquery的第三方插件就有失水准了。

在vue组件做如下援用

模板

以上正是本文的整体内容,希望本文的剧情对大家的读书只怕干活能拉动一定的支援,同期也可望多多协理脚本之家!

import $ from ‘./assets/jquery-v’;   //导入jQuery

一次性绑定 v-once
<div id="app">
  <p v-once>{{once}}</p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
  once: 'once content'
    }
  });

  app.once = 'changed content';
</script>

您或然感兴趣的稿子:

  • 详解webpack
    怎么着集成第三方js库
  • 详解webpack提取第三方库的不易姿势

import ‘bootstrap-material-design’;//组件

不进行 html 转义
<div id="app">
  <p v-html="html">不转义的绑定(直接输出 html)</p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      html: '<div>div element</div>'
    }
  });
</script>

//调用初叶化

render属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
   var App={
        template:`
        <div>
        <ul>
             <li>{{text1}}</li>
             <li>{{text2}}</li>
        </ul>
        </div>
        `,
        data: function () {
            return{
                text1:'abc',
                text2:'123'
            }
        }
    }
    new Vue({
        el:'#app',
        render:function(createElement){
            return createElement(App);
        }
    })
    //简洁版1
//       new Vue({
//           el:'#app',
//           render:function(c){
//               return c(App);
//           }
//       })
    //简洁版2
//       new Vue({
//           el:'#app',
//           render: c => c(App)
//       })
</script>
</body>
</html>

  //var App= {};等同于 var App=Vue.extend ({});(语法糖)

$(function(){

v-text

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
   var App={
        template:`

        `,
        data: function () {
            return{
                vtext:'<h1>快乐老家</h1>'
            }
        }
    }
    new Vue({
        el:'#app',
        render: function (c) {
            return c(App);
        }
    })
</script>
</body>
</html>
//元素的innerText  ,只能是双标签,不会解析标签

 $.material.init();

v-html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
   var App={
        template:`

        `,
        data: function () {
            return{
                vhtml:'<h1>快乐老家</h1>'
            }
        }
    }
    new Vue({
        el:'#app',
        render: function (c) {
            return c(App);
        }
    })
</script>
</body>
</html>
//元素的innerHtml  ,只能是双标签 , 会解析标签

});

v-if与v-else

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
   var App={
        template:`
        <p v-if="isAble">这段话不会存在</p>
        <p v-else>这段话会存在</p>
        `,
        data: function () {
            return{
                isAble:false
            }
        }
    }
    new Vue({
        el:'#app',
        render: function (c) {
            return c(App);
        }
    })
</script>
</body>
</html>

备注:该办法是用以组件中,但是main.js已经引用jQuery.js
再在组件中那样书写会报错

精粹的列表案例

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .sss{
            background-color: mediumvioletred;
        }
        .ss{
            background-color: cadetblue;
        }
        .s{
            background-color: black;
        }
    </style>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
   var App={
        template:`
        <div>
        排名颜色
        <ul>
            <li v-for="(hero,index) in heros" :key="heros.id" :class="{SSS:'sss',SS:'ss',S:'s'} [hero.level]">
                {{hero.name}} {{hero.level}}
            </li>
        </ul>
        奇偶变色
       <ul>
            <li v-for="(hero,index) in heros" :key="heros.id" :class="index%2==0?'sss':'s'">
                {{hero.name}} {{hero.level}}
            </li>
        </ul>
        `,
        data: function () {
            return{
                heros:[{id:1 , name:'小京京',level:'SSS'},
                    {id:2 , name:'小凯文',level:'S'},
                    {id:3 , name:'小宝宝',level:'SS'}],
            }
        }
    }
    new Vue({
        el:'#app',
        render: function (c) {
            return c(App);
        }
    })
</script>
</body>
</html>
// 在做:class  就等于v-bind:class
    - 在内部就可以随意的获取data下面的属性,从而来做判断
* 设置了一个`{变量值:'样式1',变量值:'样式2'}[hero.level]`
* class:
    - 取其一
    + 三元表达式,最终返回字符串
    + 从对象中通过key去取值,最终返回字符串
- 取多个样式 (样式1 样式2)
    + 对象的方式 `{样式1:true,样式2:true}`

components

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="./lib/vue%20(1).js"></script>
<script type="text/javascript"></script>
<body>
<div id="app"></div>
<script>
    var Header={
        template:`
                <div style="background-color:red; height: 200px">

                </div>
            `
    }
    var Body={
        template:`
                <div style="background-color:greenyellow; height: 400px">

                </div>
            `
    }
    var Footer={
        template:`
                <div style="background-color:blanchedalmond; height: 100px">

                </div>
            `
    }
   var App={
        template:`
            <div>
                <header-vue></header-vue>
                <body-vue></body-vue>
                <footer-vue></footer-vue>
            </div>
        `,
       components:{
            'header-vue':Header,
            'body-vue':Body,
            'footer-vue':Footer
       }
    }
    new Vue({
        el:'#app',
        render: function (c) {
            return c(App);
        }
    })
</script>
</body>
</html>

webpack(打包工具)

  webpack  入口文件 出口文件
  `webpack  ./main.js ·/build.js`

亚洲成ca88 1

webpack.png

网站地图xml地图