Vue基础

对与vue的简洁明了的干货分享，适合小白学习观看，如果有笔误或者想了解更多的，请给笔者留言，后续会继续分享，从零开始的vue相关经验

1、创建vue实例

<div id="app"></div>
const vm = new Vue({
    el:'app',
    data:{

    }
})

2、插值语法

 <!-- 双花括号将数据当成普通文本显示
        其中可以写运算，或者判断等表达式运算
    容易遭受xss攻击 -->
    <div id="box">
        {{name}}
       <p> {{20>30?'小于':'大于'}}</p>
        <p>{{10+20}}</p>
     <!-- v-html 可以将标签解析 -->
    <p v-html="name"></p>
    <p v-if="isShow">我是动态创建和删除</p>
    <p v-show="isShow">我是动态隐藏和显示</p>
      <!-- 简写
        带有v称之为指令
        v-bind ：class = :class//控制一般属性
        v-on click = @click//绑定事件
        v-if  isShow 为true,创建，false删除
        v-show  ....显示，...,隐藏
    -->
    <button v-on:click="handleClick">点击</button>
    <p v-bind:class="isShow?'aa':'bb'"></p>
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                name:"<b>xiaoming<b/>",
                isShow:true,

            },
            methods:{
                handleClick(){
                    console.log(11);
                    this.isShow=false;
                }
            }
         })
        </script>

3、条件渲染

<body>
    <div id="box">
        <p v-if="isCreated">渲染删除</p>
        <p v-else>qqq</p>
        <!-- 渲染多个使用template  -->
        <template v-if="isCreated">
            <p>ddddd</p>
            <p>ddddd</p>
            <p>ddddd</p>
            <p>ddddd</p>
            <p>ddddd</p>
        </template>
        <!-- v-show不支持template -->
        <p v-show="isShow">显示隐藏</p>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    const vm = new Vue({
        el:"#box",
        data:{
            isCreated:true
        }
    })
</script>

4、列表渲染

body>
    <div id="box">
        <!-- v-for 循环渲染，可以用 in/of 可以有2个参数（data遍历的值，index下标） -->
        <!-- 每一项应该有一个唯一的key 一般为id -->
        <!-- 列表渲染，可以通过改变数组动态渲染当影响到数组本身时会刷新渲染-->
        <!-- 但通过索引改变无法影响渲染 解决方法vue.set(vm.datalist,0,newvalue)-->
        <input type="text" v-model="mytext">
        <!-- 过滤 -->
        <ul>
            <!-- <li v-for="(data,index) in datalist" :key="index">
                {{data}} -- {{index}}
            </li> -->
            <li v-for="(data,index) in cmputeddatalist" :key="index">
                {{data}} -- {{index}}
            </li>
        </ul>

    </div>
</body>
    <script src="../vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#box",
            data:{
                datalist:['aa','bb','ccc'],
                mytext:"",
            },
            cmputed:{
                cmputeddatalist:function(){
                    return this.datalist.filter(item=>item.indexof(this.mytext)>-1)
                }
            }
        })
    </script>

5、事件处理

 <div id="box">
<!-- 事件处理方法一：直接触发函数代码表达式 -->
<p>{{count}}</p>
        <button @click="count=count-1">-</button>
        <button @click="count=count+1">+</button>
        <!-- 二：绑定函数名,系统默认将事件对象传过去 -->
        <p>{{name}}</p>
        <button @click="handleClick">click</button>
        <!-- 三：绑定函数需要传参数使用要传事件对象传$event -->
        <button @click="handleClick1(1,2,$event)">click</button>
        <!-- vue中事件触发遵循冒泡 阻止冒泡在click.stop-->
        <!-- 事件修饰符 .stop阻止冒泡  prevent阻止默认事件 once只会触发一次 self只有事件源为本身时才能触发,修饰符可以串联使用.stop.prevent -->
        <ul @click="ulclick ">
            <li  @click="liclick">1111</li>
        </ul>
        <!-- 键值修饰符 enter回车键，space空格键 -->
        <input type="text" v-model="text" @keydown.enter="enter">{{newtext}}
    </div>
        <script src="../vue.js"></script>
        <script>
            var vm =new Vue({
                el:"#box",
                data:{
                    count:1,
                    name:"xiaoming",
                    text:"",
                    newtext:""
                },
                // methods中的方法，可以在this的$options.methods中找到，可以实现方法互用
                methods:{
                    enter(){
                        this.newtext=this.text
                    },
                    handleClick(ev){
                        console.log(ev.target);
                        this.name="aaaa"
                    },
                    handleClick1(a,b,event){
                        console.log(a,b,event.target)
                    },
                    ulclick(){
                        console.log('ul的点击')
                    },
                    liclick(){
                        console.log('li的点击')
                    }
                }
            })
        </script>

6、css与style的绑定

<style>
        .aa{
            background: red;
        }
        .bb{
            background: yellow;
        }
    </style>
</head>

<body>

    <!-- 不会覆盖只是添加到class中  -->
    <!-- v-bind 可以使用数组写法，三目运算符，和对象写法 -->
    <div id="app">
            <p class="red" :class="isshow?'aa':'bb'">css样式</p>
            <p :style="obj">对象样式</p>
            <p :style="[obj,obj2]">数组样式</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                isshow:false,
                obj:{
                    background:"red",
                },
                obj2:{
                    fontSize:"30px"
                }
            }
        })
        // 在vue中向font-size:30px,要写成fontSize:"30px";
    </script>

7、表单的输入与绑定

<body>
    <!-- 表单中v-model 有value时绑定value,单选框中绑定checked属性 -->
    <div id="box">
        <input type="text" v-model="value">{{value}}<br/>

        <input type="checkbox" v-model="isChcked">{{isChcked}}<br/>

<!-- 绑定多个的时候绑定数组，必须有value值，点击会把选中的加入数组中 -->
        <input type="checkbox" v-model="checkgroup" value="react">react<br/>
        <input type="checkbox" v-model="checkgroup" value="vue">vue<br/>
        <input type="checkbox" v-model="checkgroup" value="jquery">jquery<br/>
        {{checkgroup}}
    <!-- 修饰符 lazy 失去焦点时才会同步渲染,number将输入值转换为number trim默认清除首尾空格-->

    <input type="text" v-model.lazy="name">{{name}}<br/>
    <input type="number" v-model.number="age">{{age}}<br/>
    <input type="text" v-model.trim="text">|{{text}}|<br/>

    </div>
</body>
<script src="../vue.js"></script>
<script>
    const vm = new Vue({
        el:"#box",
        data:{
            value:"",
            isChcked:false,
            checkgroup:[],
            name:"",
            age:"100",
            text:""
        }
    })
</script>

8.methods中定义方法，

9.computed计算属性，可以当做变量使用，computed会根据数据改变而重新计算，调用多个时，只会执行一次，然后缓存值，methods会多次执行，

10.watch监听某一属性的改变，而触发，（推荐使用computed）

前端Vue基础学习的更多相关文章

Vue – 基础学习(4):事件修饰符
Vue – 基础学习(3):事件修饰符
Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
Vue – 基础学习(2):组件间通信及参数传递
Vue – 基础学习(2):组件间通信及参数传递
Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
[前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
前端——Vue.js学习总结一
一.什么是Vue.js 1.Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架 2.Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端 ...
vue基础学习（二）
02-01 vue事件深入-传参.冒泡.默认事件 <div id="box"> <div @click="show2()"> < ...
vue基础学习（一）
01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= func ...
偏前端-vue.js学习之路初级（二）组件化构建
vue.js 组件化构建组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...

随机推荐

[Unity3D]Unity3D游戏开发Lua随着游戏的债券(在)
---------------------------------------------------------------------------------------------------- ...
.net core下，Ocelot网关与Spring Cloud Gateway网关的对比测试
有感于 myzony 发布的针对 Ocelot 网关的性能测试 ,并且公司下一步也需要对.net和java的应用做一定的整合,于是对Ocelot网关.Spring Cloud Gateway网关做个 ...
silverlight，WPF动画终极攻略之番外 3D切换导航篇（Blend 4开发）
原文:silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发) 这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来. 1.新建一个user ...
TOP计划猿10最佳实践文章
本文转自:EETproject教师专辑 http://forum.eet-cn.com/FORUM_POST_10011_1200263220_0.HTM?click_from=8800111934, ...
C#WPF 如何绘制几何图形图示教程绘制sin曲线正弦绘制2D坐标系有图有代码
原文:C#WPF 如何绘制几何图形图示教程绘制sin曲线正弦绘制2D坐标系有图有代码 C#WPF 如何绘制几何图形? 怎么绘制坐标系?绘制sin曲线(正弦曲线)? 这离不开Path(Syst ...
关于fastjson用法
fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器,来自阿里巴巴的工程师开发. public static final String toJSONString(Obje ...
Binding的三种方式
1 Text="{Binding Name}" Name为后台的属性 2 Text="{Binding ElementName=XXX,Path=A.B.C.D….}&q ...
WPF 数据模板DataType属性的使用，不用指定ItemTemplate
<Window x:Class="CollectionBinding.MainWindow" xmlns="http://schemas.micros ...
图像滤镜艺术---Glow Filter发光滤镜
原文:图像滤镜艺术---Glow Filter发光滤镜 Glow Filter发光滤镜 Glow Filter发光滤镜是一种让图像产生发光效果的滤镜,它的实现算法如下: 1,对原图P进行高斯模糊得到图 ...
Win8 Metro(C#)数字图像处理--2.67图像最大值滤波器
原文:Win8 Metro(C#)数字图像处理--2.67图像最大值滤波器 [函数名称] 最大值滤波器WriteableBitmap MaxFilterProcess(WriteableBi ...

前端Vue基础学习

Vue基础

前端Vue基础学习的更多相关文章

随机推荐

热门专题