vue基础语法 - 前端笔记-一,vue是什么 简单的上vue就是一个框架,是一套构建在用户界面上的渐进式框架,vue的使用类似于jQuery的使用,直接引入vue库文件 二,vue的基础命令 1.vu...

学习笔记

乾坤未定,你我皆是黑马
乾坤已定,我便扭转乾坤
首页>> >>vue基础语法 - 前端笔记
2019-12-31
分类:

vue基础语法

文章作者:痴迷

一,vue是什么     简单的上vue就是一个框架,是一套构建在用户界面上的渐进式框架,vue的使用类似于jQuery的使用,直接引入vue库文件 二,vue的基础命令 &nbs......

一,vue是什么
    简单的上vue就是一个框架,是一套构建在用户界面上的渐进式框架,vue的使用类似于jQuery的使用,直接引入vue库文件
二,vue的基础命令
    1.vue的简单实例
   
     <div id="app">
            <ul>
                <li>{{msg}}</li>  <!-- // 页面显示 123456 -->
                <li>{{sum}}</li>  <!-- // 页面显示 name:'张三',age:18 -->
                <li>{{sex()}}</li>  <!-- // 浏览器显示  男 -->
            </ul>
        </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script type="text/javascript">
        let vm = new Vue({ // new Vue 是创建Vue实例
            el:'#app'//el是声明数据放在哪个地方使用(不能以html,和body为父级)
            data:{ // data 里面专门方变量的
                msg:'123456',
                sum:{name:'张三',age:18}
            },
            methods:{ //methods 里面专门放函数的
                sex:function(){
                    console.log('男');
                }
            },
            directives:{ //局部指令注册   注册局部指令的
                s:function(){
                }
            },
            filters:{ //过滤器   允许你自定义过滤器,可被用于一些常见的文本格式化   过滤器的接收的值是要过来的内容  
            //{{ msg | cap}}   这是过滤器的使用 |  return返回
            cap:function(value){
                if(value == 10){
                return  value = 10;
                }
            }
                
            },
            computed:{ //计算属性    但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
                // {{cunot}} 
                cunot:function(){
                return  this.a +this.b
                }
            },
            watch:{ //侦听属性   侦听属性的变化
                    msg:function(){
                        this.num = this.msg + this.a    
                    }
            }
        });
    </script>

2.Vue的指令
    (1)插值对  {{数据}}
<li>{{son}}</li> //插值对

    (2)v-cloak  防止页面加载时出现闪烁问题(在使用插值对的时候会出现闪烁,在标签上加 v-cloak 防止闪烁)
<li v-cloak>{{row}}</li> //防止插值对闪烁

    (3)v-text  渲染数据的  , 不能解析 html 标签
  <li v-text="num"></li>//渲染数据 ,不支持解析html标签

    (4)v-html  渲染数据的  ,  可以解析 html标签
  <li v-html="num"></li>//渲染数据 , 支持解析html标签

    (5)v-pre  跳过编译过程 ,  页面上写什么显示就是什么
  <li v-pre>{{row}}</li> //跳过编译, 页面上写什么,就显示什么

    (6)v-once   执行一次性的插值【当数据改变时,插值处的内容不会继续更新】
<li v-once >{{son}}</li> //只执行一个编译,后面son的值改变也不会编译了

    (7)v-model  双休绑定 ,当数据发生变化的时候,视图也就发生变化
            <li> <input type="text " v-model="rows" />{{rows}} </li> //双休绑定,通常用于 input select textarea 等标签

    (8) 条件渲染 v-if   v-esle-if      v-show 显示
            <li v-text="num+'a'" v-if="rows == 0">a</li> //条件判断
            <li v-html="num+'b'" v-else-if="rows == 1">b</li>
            <li v-html="num+'c'" v-else-if="rows == 2">c</li>
            <li v-html="num+'d'" v-else>d</li>
            <li v-show="r">{{num}}</li>

    (9)列表渲染 v-for   循环数据   对象
  <li v-for="r in row">{{r}}</li> //循环渲染数据
            <li v-for="(r,x) in row">{{r}}----{{x}}</li> // 值和键
            <li v-for="r,x in row">{{r}}----{{x}}</li>
            <li v-for="v in rs">{{v}}</li>
            <li v-for="v,x in rs">{{v}}--{{x}}</li>
  
    (10)绑定点击事件     v-on:    @
    
 <li v-on:click="sex">点击我</li> //绑定事件
            <li @click="sex">点击我</li>//绑定事件的简写

    (11)绑定元素内联样式,(calss , src  ,style 都可以)v-bind:     :
  <li v-text="num" v-bind:class="r1"></li>//元素内链样式
            <li v-text="num" :class=" r ?r1 : '' "></li>//元素内链样式的简写

    (12)监听数据变化   vm.$watch('监听变量',function(){})
        vm.$watch('num',function(newval,loaval){
            console.log(newval,loaval,123456)
    (13)  生命周期就是通过vue定义好的函数(什么事件加载完成函数,组件加载完成函数,。。。),调用函数即可
    (14)  全局组件注册  Vue.component('名称',{});
  (15)局部组件注册  在Vue实例下面创建 components:{组件名称:{}}
  (16)单文件组件注册  一脸懵逼中
 



×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » vue基础语法
版权所有:《前端笔记
文章标题:《vue基础语法
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-18.html

网友评论(0)