zoukankan      html  css  js  c++  java
  • 个人Vue-1.0学习笔记

    dVue.js是类似于angular.js一套构建用户界面的渐进式框架关注视图层 采用自底向上增量开发的设计

    Vue.js的代码需要放置在指定的HTML元素后面。

    关于Vue的数据绑定:

    例子:

    <div id="app">  {{a}}    </div>
    
    new Vue({
    
            el:"#app",              //使用选择器找到绑定数据的模块
    
            data:{
    
                a:"hello world"    //数据内容
    
            }
    
    })

    防止刷新看到花括号的方法:在父元素添加v-cloak  是一个样式,添加后在CSS里定义

    [v-cloak]{
    
    Display:none;
    
    }
    
    <span>{{msg}}</span>    ->   v-text       
    
    {{{msg}}}    ->   v-html         // 转义HTML文本     

    关于Vue的双向数据绑定:使用v-model

    例子:

    <div id="app">
    
      {{a}}
    
      <input type="text" v-model="a"/>
    
    </div>
    
    new Vue({
    
            el:"#app",             
    
            data:{
    
                a:"hello world"    //数据内容
    
            }
    
        })

    如果不想页面上的数据随着输入值改变,可以*   输入改变数据后,页面不会改变数据只绑定一次   {{a*}}      页面加载的时候进行数据绑定,后面数据更改页面不变化

    HTML转意输出   {{{msg}}}   js中定义的HTML语法,会直接在页面生成

    例子;

    <div id="app">
    
      {{a*}}
    
      <input type="text" v-model="a"/>
    
    </div>
    
     

    关于Vue的事件绑定:使用v-on

     

    后面跟各种事件:v-on:click/mouseout/mouseover/dblclick/mousedown.....

    可以简写为   @click=""

    例子:v-on:click="函数"

     

     

    事件对象:       $event    封装了的事件event  表示当前鼠标点击对象

    @click="show($event)"

    事件冒泡:

    阻止冒泡:  在事件后面加上         .stop

    ev.cancelBubble=true;   使用 $event 后定义在方法中   

    @click.stop推荐         @click.stop=“方法” 原生写法

    默认行为(默认事件):         在事件后面加上   .prevent

    阻止默认行为:

    ev.preventDefault();

    @contextmenu.prevent推荐       

    键盘事件:

    @keydown  敲打键盘任意键触发(显示前) 后面可以直接.序号表示按某个键@keyup       敲打键盘任意键触发(显示后)

    $event.keyCode   键盘触发事件对象,即该按键的序号在方法中传入事件对象

    常用键:

    回车

    a). @keyup.13      //  13表示按键的键盘序号

    b). @keyup.enter    推荐

    上、下、左、右

    @keyup/keydown.left

    @keyup/keydown.right

    @keyup/keydown.up

    @keyup/keydown.down

    .....

    自定义键盘信息:

    Vue.directive('on').keyCodes.ctrl=17;       //  ctrl 是按键名称

     //声明某个按键的序号,即可以在后面使用@keydown /@keyup .按键名调用

    关于Vue的事件绑定:使用v-bind

    v-bind:src=""  后面跟各种属性,如src/class/style.....

    简写:       :src="url"     后面可以直接写data里的数据名称

    Class后面带的可以是一个数组,也可以是一个对象,或者直接一个json文件

    例子:

    <strong :class="json">文字...</strong>
    
     <strong :class="[e,red]">文字...</strong>
    
    <strong :class="{red:true,blue:false}">文字...</strong>

    关于Vue的列表输出:使用v-for

    相当于angular的ng-repeat,不过不需要var

    例子:

        <ul>
    
            <li v-for="n in todos">{{n.text}}</li>
    
        </ul>
    new Vue({
    
        el:".app",
    
        data:{
    
            todos:[
    
                {text:"第一个数据"},
    
                {text:"第二个数据"},
    
                {text:"第三个数据"},
    
            ]
    
        }
    
    })

    $index :表示遍历的索引下标,默认从0开始

    $key:表示遍历json数组时的key值

    v-for="(k,v) in json"    这样的写法会在页面同时输出key值value值

    当数组数据有重复时,使用v-for会报错,需要添加track-by='$index/uid'

    关于Vue的条件判断:使用v-if  v-else  控制元素显示或者隐藏

    例子:

    <div v-if="true">为true时显示</div>

    <div v-else>否则这个显示</div>

    v-show:类似于v-if  不过隐藏时也会占据页面空间

    v-on: 绑定一个事件,后面跟随触发类型

    例子:

     <button v-on:click="revr">Reverse Message</button>
    
    var app5 = new Vue({
    
      el: '#app-5',
    
      methods: {
    
        revr: function () {
    
          this.message = this.message.split('').reverse().join('')   //使用Vue内部的变量,需要使用this
    
        }
    
      }
    
    })
    
     

     

    关于Vue的过滤器:跟angular一样也是使用  数据|格式

    vue提供过滤器 : capitalizeuppercasecurrency....

    数组数据配合使用过滤器:

    limitBy限制几个 即数组遍历显示的时候限制显示几个,后面带两个参数

    limitBy 取几个  从哪个下标开始     如:limitBy 2 3

     

    filterBy过滤数据将包含某个数据的内容显示

    filterBy 包含的内容          如:filterBy a

     

    orderBy排序将数组内容排序显示,后面两个参数   

    1表示正序,-1表示倒序

       orderBy 按照什么排序 1/-1    如:  orderBy 'o'

    例子:

    {{data | uppercase}}     //转化为大写
    
    val in arr | limitBy 2   //只显示两个数据
    
    val in arr | filterBy a   //只显示包含数据a的内容
    
    val in arr | orderBy 'o'   //以o数据位置为标准进行排序显示

     

    Vue.filter:自定义转化格式,,需要在js中使用Vue.filter定义,可以改变数据的格式、内容等

    Vue.filter('name', function (value) {       //定义格式转化名称name,传入参数值value

        return value.split('').reverse().join('')   //重新定义数据内容并return 返回

    })

    时间过滤器:

            Vue.filter('date',function(input){
    
                var oDate=new Date(input);
    
                return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
    
            });

    双向过滤器:使用在v-modul 绑定数据的过滤

    Vue.filter('filterHtml',{
    
                read:function(input){                          //model-view    
    
                    return input.replace(/<[^<]+>/g,'');
    
                },
    
                write:function(val){                       //view -> model   
    
                    return val;
    
                }
    
    });

    关于Vue的数据交互: 引入: vue-resource

    引入vue-resource.js文件,使用this.$http

     

    get方式:

    获取一个普通文本数据:不需要传参数的时候

    this.$http.get('aa.txt').then(function(res){
    
        alert(res.data);
    
    },function(res){
    
        alert(res.status);
    
    });

    then() :   里面跟两个方法,第一个为请求成功,第二个为失败

    res:     传入方法内,表示请求返回的数据

    res.data:表示请求返回的数据内容

     

    给服务发送数据:需要传参数的时候  

     

       this.$http.get(this.$root.api+'/Index/Staff/training',{params:{    //传递的参数必须为一个对象,使用params
    
        subject_field_id:1,        //表示传参数过去,值为1
    
        train_state:2
    
    }}).then(function(res){
    
         console.log(res.data);
    
    },function(res){
    
        alert(res.status);
    
    });

     

     

    get():请求方式括号内带一个对象,对象内容为传过去的参数

    post方式:在请求方式括号内增加一个对象   {   emulateJSON:true  }

    this.$http.post('post.php',{
    
        a:1,
    
        b:20
    
    },{
    
        emulateJSON:true
    
    }).then(function(res){
    
        alert(res.data);
    
    },function(res){
    
        alert(res.status);
    
    });

    jsonp方式:跨域请求,请求地址为外域网站

    https://sug.so.360.cn/suggest?callback=suggest_so&word=a

    https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

     

    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
    
        wd:'a'      //传过去的参数
    
    },{
    
        jsonp:'cb'    //更改callback名字,默认名字就是"callback"
    
    }).then(function(res){
    
        alert(res.data.s);
    
    },function(res){
    
        alert(res.status);
    
    });
    
     

    第四种方式:默认是get提交

    this.$http({
    
    url:地址
    
    data:给后台提交数据,
    
    method:'get'/post/jsonp    提交方式
    
    jsonp:'cb'       //cbName       如果是jsonp提交方式,声明名称
    
    });

    关于Vue的生命周期vue内部执行过程

    new Vue({})声明了一个对象,也叫钩子函数

    Vue内部会自己经历四个阶段:可以在后面跟方法

    created            new Vue执行后,即实例已经创建时执行

    beforeCompile:当开始编译HTML页面所有的Vue语法之前执行

    compiled        当编译HTML页面所有的Vue语法结束之后执行

    ready              当编译结束后把所有元素挂到Dom树,即插入到文档中后执行

    Vue可以通过new声明创建,也可以进行销毁使用$destroy

    销毁后会经历两个阶段:

    beforeDestroy: 销毁之前

    destroyed:   销毁之后

    例子:

    var vm=new Vue({ });
    
            document.onclick=function(){   
    
                vm.$destroy();      /*点击页面销毁vue对象*
    
            };

    关于Vue的计算属性类似data数据

    同样是一个数据,不过后面跟的是function的写法,放置逻辑代码,使用return返回值,没有使用return返回值,则该数据为空

    一般情况下,只使用get返回的数据无法在后期通过其他办法更改值

    * computed里面可以放置一些业务逻辑代码,一定记得return

    有两种写法:

    computed:{
    
    b:function(){        //默认调用get
    
    return 值
    
    }
    
    }

    完整写法:

           computed:{
    
                    b:{
    
                        get:function(){       
    
                            return this.a+2;
    
                        },
    
                        set:function(val){      //必须传入一个值
    
                            this.a=val;
    
                        }
    
                    }
    
                }

    监听数据变化 : vm.$watch   监听某个数据,发生改变时执行方法

    vm.$watch(name,function);   //name表示监视的数据名称,后面带方法

    vm.$watch(name,fnCb,{deep:true});  //深度监视 ,监视对象是数组

     

    关于Vue的实例简单方法

    因为var vm=new Vue({})等于实例化一个对象,所以可以通过 . 访问它的各个值

    vm.$el->  就是元素,可以直接获取el后面选择器的整个元素内容

    vm.$data  ->  就是data,获取data里的所有数据,返回数组

    vm.$destroy->   销毁对象

    vm.$log();->  查看现在数据的状态,即在控制台输出所有数据

    vm.$mount ->  手动挂在vue程序,当没有声明el:控制器时使用

    例子:   

       var vm=new Vue({
    
                data:{
    
                    a:1,
    
                    b:2
    
                }
    
            }).$mount('#box');
    
     

    vm.$options->   获取自定义属性,即定义的各个数据或方法写在外部

    例子:

     

     var vm=new Vue({
    
                aa:11,                 //自定义属性,
    
                show:function(){
    
                    alert(1);
    
                },
    
                data:{
    
                    a:1
    
                }
    
            }).$mount('#box');
    
            vm.$options.show();
    
            console.log(vm.$options.aa);
    
     

     

     

    关于Vue的自定义指令Vue.directive

    类似v-text  v-for  v-html 都称为Vue的指令,即扩展的html语法

    可以通过Vue.directive自定义这些指令

      Vue.directive('red',function(a){            //red为自定义的指令的名称
    
                this.el.style.backgrund='red';   //this.el指使用该指令的元素
    
            });
    
     <span v-red>  内容  </span>       //指令名称为red,这里需要使用v-

     指令后面可以带参数,例如 v-text=“a”    

    a相当于在自定义的function传入的参数  

           

    自定义元素指令:(用处不大)  Vue.elementDirective

    Vue.elementDirective('zns-red',{    //自定义HTML标签zns-red
    
        bind:function(){
    
            this.el.style.background='red';   //定义该标签作用
    
        }
    
    });
    
    <zns-red></zns-red>

    关于Vue的动画引入animate.css

    最基本的动画:

    //给需要添加动画的元素添加transition="名称"

    例子:

    <div id="div1" v-show="bSign" transition="fade"></div>  
    
    //在css样式里面进行定义
    
    <style>
    
    .fade-transition{  transition : 1s all ease; }   //定义动画时间
    
    .fade-enter{ opacity: 0;  }    //进入的动画
    
    .fade-leave{ opacity: 0; transform: translateX(200px); }  //离开的动画
    
    </style>

    推荐使用的动画:引入animate.css

    animate.css是一个css动画库,可以在百度上直接下载,在页面引入

    //给需要添加动画的元素添加transition="名称"  class=animated

    例子:

    <div id="div1" class="animated" v-show="bSign" transition="bounce"></div> 

    //在new Vue里面声明transitions对象并定义动画

    new Vue({
    
    el:'#box',
    
    transitions:{           
    
    bounce:{         //动画的名称
    
    enterClass:'zoomInLeft',    
    
     //进入时使用的动画的class,参考animate.css书册
    
    leaveClass:'zoomOutRight'    //离开时使用的动画的class
    
    }
    
    }
    
    });

    关于Vue的组件:Vue.extend    Vue.component

    vue组件:其实就是一个大的对象,例如new Vue就是一个组件

    1. 全局组件  Vue.component定义在外部全局组件

    两种书写方式:

    *组件里面放数据 : data必须是函数的形式,函数必须返回一个对象(json);事件不变

    <div id="box">  <aaa></aaa>  </div>   //自定义的HTML标签
    
    <script>
    
    var Aaa=Vue.extend({                 //  赋值给变量Aaa
    
    data(){
    
    return {    //组件内部的数据以对象的形式,需要return返回
    
    msg:'ddddd'       //定义数据
    
    }
    
    }
    
     
    
    template:'<h3>{{msg}}</h3>'    //使用Vue.extend定义一个模版,
    
    });                                    
    
    Vue.component('aaa',Aaa);        //使用Vue.component将aaa绑定到Aaa
    
    //Vue.component定义在外部为全局组件
    
    绑定后页面使用<aaa></aaa>相当于<h3>我是标题3</h3>
    
    var vm=new Vue({
    
    el:'#box',
    
    data:{
    
    bSign:true
    
    }
    
    });
    
    </script>

    第二种书写方式:

    Vue.component('my-aaa',{    //绑定
    
    template:'<strong>好</strong>'   //定义模版
    
    });
    
    var vm=new Vue({
    
    el:'#box'
    
    });

    2. 局部组件      Vue.component定义在某个组件局部组件

    var Aaa=Vue.extend({                 //  赋值给变量Aaa
    
    data(){
    
    return {    //组件内部的数据以对象的形式,需要return返回
    
    msg:'ddddd'       //定义数据
    
    }
    
    }
    
    template:'<h3>{{msg}}</h3>'    //使用Vue.extend定义一个模版,
    
    });
    
    var vm=new Vue({
    
    el:'#box',
    
    components:{       //在new Vue里面将aaa绑定到Aaa,为局部组件
    
    “aaa” : Aaa
    
    }
    
    });

         第二种书写方式:

    var vm=new Vue({
    
    el:'#box',
    
    components:{
    
    'my-aaa':{         //自定义的标签,<my-aaa></my-aaa>
    
    data(){
    
    return {
    
    msg:'welcome vue'   
    
    }
    
    },
    
    methods:{
    
    change(){
    
    this.msg='changed';
    
    }
    
    },
    
    template:'<h2 @click="change">标题2->{{msg}}</h2>'
    
    }     //定义模版
    
    }
    
    });

    配合模版:定义的模版比较复杂时,可以在其他位置定义,

          然后在template绑定id

    两种书写方式:

     

    第一种.

    <script type="x-template" id="aaa">
    
    <h2 @click="change">标题2->{{msg}}</h2>
    
    </script>

    第二种.

     <template id="aaa">
    
    <h1>标题1</h1>
    
    <ul><li v-for="val in arr">{{val} }</li> </ul>
    
    </template>

    动态组件:可以通过js动态更改页面上的组件模版

    <component :is="组件名称"></component>
    
    <component :is="a"></component>
    
    <script>
    
    var vm=new Vue({
    
    el:'#box',
    
    data:{
    
    a:'aaa'
    
    },
    
    components:{
    
    'aaa':{  template:'<h2>我是aaa组件</h2>'  },  //定义模版
    
    'bbb':{   template:'<h2>我是bbb组件</h2>' }
    
    }
    
    });
    
    </script>

    组件的嵌套:组件里面可以嵌套另一个组件

    var vm=new Vue({
    
    el:'#box',
    
     
    
    components:{     //父级组件
    
    'aaa':{
    
    template:'<h2>我是aaa组件</h2><bbb></bbb>',  
    
     //子级组件定义的标签在父级模版使用
    
    components:{    //子级组件
    
    'bbb':{  template:'<h3>我是bbb组件</h3>' }
    
    }
    
    }
    
    }
    
    });

    组件之间的数据交互:

    子组件获取父组件的数据props

     :mmm.sync表示同步数据,即子组件数据改变,父组件数据也改变

    <template id="aaa">           //父组件的模版
    
    <h1>11111</h1>      
    
    <bbb :mmm="msg2"></bbb>  //子组件的内容,msg2为父组件的数据,绑
    
    </template>                                           定到自定义的名称上

     

    components:{       //这个为子组件
    
    'bbb':{
    
    props:['mmm'],         //使用props 自定义名称  mmm
    
    template:'<h3>我是bbb组件->{{mmm}}</h3>' //使用自定义的名称
    
    }

    父组件获取子组件的数据vm.$emit(事件名,数据);  

    需要子组件自己触发事件发射数据

    <template id="aaa">
    
    <span>我是父级 -> {{msg}}</span>
    
    <bbb @child-msg="get"></bbb>  //使用定义的事件名,触发父组件的方法
    
    </template>
    
    <template id="bbb">
    
    <h3>子组件-</h3>
    
    <input type="button" value="send" @click="send">  //触发事件发射数据
    
    </template>
    methods:{   get(msg){ this.msg=msg;} //父组件的方法,接收子组件发射的数据
    
    methods:{         
    
    send(){  this.$emit('child-msg',this.a);  } //子级组件内的一个方法,使用$emit
    
    }                            // child-msg为事件名,this.a为子组件的数据

    <slot></slot> :  保留组件模版内原本的HTML文本

    组件内部的HTML文本默认会被定义的模版内容覆盖,使用slot可以保留原本的HTML文本,当需要多个slot分别代表多个HTML文本时,可以设置slot值和name值一致

    例子:

     

    <ul slot="ul-slot"></ul>    <slot name="ul-slot"></slot>

     

     

     

    关于Vue的路由跳转:<router-view></router-view>

    需要在页面引入vue-router文件,然后在自定义的js文件中配置路由

    例子:

    <div id="app">
    
      <p>
    
        <!-- 使用 router-link 组件来导航. -->
    
        <!-- 通过传入 `to` 属性指定链接. -->
    
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    
        <router-link to="/foo">Go to Foo</router-link>  
    
        <router-link to="/bar">Go to Bar</router-link>
    
      </p>
    
      <!-- 路由匹配到的组件将渲染在这里 -->
    
      <router-view></router-view>
    
    </div>
    <script>
    
    const Foo = { template: '<div>foo</div>' }   // 定义(路由)组件并编写HTML内容
    
    const Bar = { template: '<div>bar</div>' }  // 可以从其他文件 import 进来
    
     
    
    // 2. 定义路由
    
    const routes = [
    
      { path: '/foo', component: Foo },  //定义路由的名称,以及路由跳转的位置
    
      { path: '/bar', component: Bar }
    
    ]
    
    // 3. 创建 router 实例,然后传 `routes` 配置
    
    const router = new VueRouter({
    
      routes               // (缩写)相当于 routes: routes,后面也可以跟一个对象数组
    
    })
    
    // 4. 创建和挂载根实例。页面的data数据内容以及methods方法在这里面编写
    
    const app = new Vue({
    
      router
    
    }).$mount('#app')
    
    </script>
    
     

    关于Vue使用了脚手架后自动创建环境的路由跳转:

    Vue.js提供了自己的脚手架vue-cli,用于自动生成vue.js模板工程。即使用该脚手架会自动安装好webpack打包需要的所有模块等等。安装vue-cli之前,需要先安装了vue和webpack。

     

    安装vue-cli步骤:在命令行输入以下指令

    npm install -g vue-cli                       //全局安装vue-cli

    vue init webpack projectName               //生成项目名为projectName的模板,这里的项目名可以自定义

    cd projectName                              //打开模板

    npm install                                  //初始化安装依赖

    npm run dev                            //运行项目 可自动打开项目并实时更新

    npm run build                       //执行发布打包  为代码编写完成后的最后步骤

     

    代码编写:

    初始化安装依赖后项目目录如下:

     

     

    Index.html文件为总页面。需要从外部引入的css等文件在这里引入

    打开src文件夹,

     

    Components文件夹内的各个vue文件为各个单页面,各单页面在这个文件夹里面编写,样式和js代码全部写在一起。

     

    //HTML代码编写在<template>标签的div,必须使用一个div作为父容器

    //js代码编写在<script>标签的export default 对象里面,data数据需要return到外部才可以使用,事件对象还是写在methods对象里面

    //该页面的样式全部写在<style>标签里面

     

    例子:

    <template>
    
      <div id="app">                                
    
        <router-link to="/bar">Go to Bar</router-link>
    
        <router-link to="/">Go to main</router-link>
    
      </div>
    
    </template>

     

    <script>
    
    export default {
    
      name: 'app',
    
      data () {
    
        return {
    
                 todos:[
    
                {text:"sddfsdf"},
    
                {text:"dsf"},
    
                {text:"sdfsdf"},
    
            ],
    
       message:"IS my work"
    
        }
    
      },
    
    methods:{
    
        revr: function () {
    
          this.message = this.message.split('').reverse().join('')   
    
        }
    
    }
    
    }
    
    </script>

     

    <style>
    
    #app {
    
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
    
    }
    
    </style>
    
     

     

    Router文件内有一个index.js文件,里面编写的是该项目的路由

    使用import从外部引入各个单页面文件(vue文件),不需要加vue后缀

    routes对象数组内设置路由,每个路由为一个对象

     

    例子:

    import Vue from 'vue'
    
    import Router from 'vue-router'
    
    import Hello from 'components/Hello'
    
    import Foo from 'components/Foo'     //引入单页面文件
    
    import Bar from 'components/Bar'
    
    Vue.use(Router)
    
    export default new Router({
    
      routes: [
    
        {
    
          path: '/',
    
          name: 'Hello',
    
          component: Hello,
    
        },
    
    {
    
      path: '/foo',
    
          name: 'Foo',
    
          component: Foo
    
     },
    
    {                               //配置路由
    
      path: '/bar',                    //路由的链接
    
          name: 'Bar',                  
    
          component: Bar                  //路由的名称
    
     }
    
      ]
    
    })
    
     

     

    App.vue文件为页面默认跳转页面。可以根据情况修改内容

     

    关于如何在vue-cli里面配置默认路径的简写方式:

     在build文件夹中的webpack.base.conf.js中,alias里进行相关配置

      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
          'base': path.resolve(__dirname, '../src/sass/base/_base.scss')
        }
      },

     

     

     集成vue+ts 开发环境配置

    1.完成vue-cli 下载后,安装TypeScript相关依赖和项目其余依赖

    # npm install typescript ts-loader --save-dev
    # npm install

     

    安装官方插件vue-class-component,vue-property-decorator

    npm install vue-class-component,vue-property-decorator --save-dev

    2.修改目录下bulid/webpack.base.conf.js文件,在文件内module>rules添加以下规则

    {
      test: /.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/.vue$/],
      }
    },

    修改入口文件

    entry: {
     app: './src/main.ts'
    }

    resolve部分

    extensions: ['.js', '.vue', '.json', '.ts', '.tsx']

    3.在src目录下新建一个文件vue-shims.d.ts,用于识别单文件vue内的ts代码

    declare module "*.vue" {
      import Vue from "vue";
      export default Vue;
    }

    4.在项目根目录下建立TypeScript配置文件tsconfig.json

    {
     "include": [
     "src/**/*"
     ],
     "exclude": [
     "node_modules"
     ],
     "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
     "allowJs": true,
     "module": "es2015",
     "target": "es5",
     "moduleResolution": "node",
     "experimentalDecorators": true,
     "isolatedModules": true,
     "lib": [
      "dom",
      "es5",
      "es2015.promise"
     ],
     "sourceMap": true,
     "pretty": true
     }
    }

    5.重命名src下的main.jsmain.ts, .vue文件的<script>改为 <script lang="ts">

    <script lang="ts">
      import Vue from 'vue'
      import Component from 'vue-class-component'
      import { Watch } from 'vue-property-decorator'
      @Component
      export default class Hello extends Vue {
        msg: string = 'this is a type'
    
      get productIdsString() {
        const arr = [1,2,3,4]
        return arr.join('_')
      }
    
      @Watch('msg')
        onSidChange() {
        this.tets()
      }
    
        tets() {
          alert('dsdsd')
        }
    
        cheng() {
          this.msg = '45654654654'
        }
      }
    </script>

     如何将vue文件中的css 和 js 分离

    1. js中引入 Component 和vue文件

    import { Watch, Component } from 'vue-property-decorator'
     import Template from './HelloWorld.vue'    

     2.在 Component中声明引入的vue文件

    @Component({
      mixins: [Template],
    })

    3 路由引入直接指定到目录即可

    import HelloWorld from '@/components/Hello'

     

  • 相关阅读:
    跳出iframe
    leetcode 225. Implement Stack using Queues
    leetcode 206. Reverse Linked List
    leetcode 205. Isomorphic Strings
    leetcode 203. Remove Linked List Elements
    leetcode 198. House Robber
    leetcode 190. Reverse Bits
    leetcode leetcode 783. Minimum Distance Between BST Nodes
    leetcode 202. Happy Number
    leetcode 389. Find the Difference
  • 原文地址:https://www.cnblogs.com/zhengweijie/p/6906004.html
Copyright © 2011-2022 走看看