vue学习回顾第一天

作者: xinhongwu | 来源:发表于2018-12-01 16:16 被阅读0次

为什么要学习vue

为什么学习vue.png

什么是mvvm

MVVM.png

vue常用系统指令

vue的使用

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1引入vue文件-->
    <script src="./vue2.js"></script>
</head>
<body>
<!-- 5使用{{}}展示数据-->
<div id="app">{{message}}</div>
</body>
<script>
    //2创建vue实例
    let vm=new Vue({
         // 3. 通过el属性指定vue实例的监管范围，它的值是一个id
        el:"#app",
        //4 data属性保存数据
        data: {
            message: "hello world"
        }
    })
</script>
</html>

插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2.js"></script>
</head>
<body>
<div id="app">
    <!-- 插值表达式的合法用法有：表达式/三元运算符 -->
    <p>表达式</p>
    <p>{{name+"xin"}}</p>
    <p>{{age+3}}</p>
    <p>{{name.split('').reverse().join('')}}</p>
    <h2>三元运算符</h2>
    <p>{{age>18?"已成年":"未成年"}}</p>
</div>
</body>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            name:'xhw',
            age:23
        }
    })
</script>
</html>

v-text

<div id="app">
    <!--
       v-text指令也可以用来渲染文本 凡是以v-开头的就是指令，指令的功能就是增强html标签的功能
       使用：在标签属性位置写上v-text="属性名"

       和插值表达式使用区别：
         插值表达式写在标签的innerHTML位置，而v-text写在标签属性位置，平时推荐使用{{}}
      -->
    <div v-text="name"></div>
</div>
</body>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            name:'xhw'
        }
    })
</script>

v-html

<body>
<div id="app">
    <!-- v-html可以用来渲染带标签的文本 -->
    <!-- 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。 -->
    <div v-html="name"></div>
</div>
</body>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            name:"<h1>xhw</h1>"
        }
    })
</script>

v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2.js"></script>
    <style>
        .red-font{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- v-bind阔以用来动态绑定属性 使用方式 v-bind:属性名=“data里面的属性” -->
    <img v-bind:src="img">
    <!-- 简写-->
    <img :src="img">

    <a :href="'del.php?id='+id">删除</a>
    <!-- v-bind阔以想绑什么属性，就绑什么属性，这种绑定在后面组件开发的时候很常用 -->
    <p :name="name">测试属性绑定</p>
    <!-- v-bind 动态绑定样式-->
    <p :class="{'red-font': true}">红色字体</p>
</div>
</body>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            name:"tom",
            age:'23',
            img:'./avatar.jpg',
            id:2
        }
    })
</script>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2.js"></script>
</head>
<body>
<!--
       使用v-for渲染数组 和 对象
       v-for能够根据data中数据的变化自动刷新视图

       v-for渲染数组
         1. 在标签的属性位置写上v-for="item in arr" item表示数组中的每一项，这个名字可以随意取，arr表示需要遍历的数组
         2. 在标签的属性位置写上v-for="(item, index) in arr" index表示数组项的索引值
       v-for渲染对象
         1. 在标签的属性位置写上v-for="value in obj" value表示对象键的值，这个名字可以随便取，obj表示需要遍历的对象
         2. 在标签的属性位置写上v-for="(value, key, index) in obj" key表示对象的键

         注意，以下两种情况不会触发视图更新
           1. 当使用数组的length属性去改变数组的时候，不会触发视图更新
           2. 使用数组下标的方式去改变数组的时候，也不会触发视图更新

         解决上述问题：
           1. 使用Vue.set(arr, index, newVal) arr是需要改变的数组，index是数组里面的项， newVal是改变后的值
           2. Array.prototype.splice()

           注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复
     -->
<div id="app">
    <p v-for="people in user ":key="people.name">{{people.name}}-{{people.age}}</p>
    <p v-for="(item,index) in user " :key="item.name">{{item.name}}:{{item.age}}--{{index}}</p>
    <p v-for="value,key in animal " :key="value">{{value}}</p>
    <p v-for="value ,key ,index in animal" :key="value">{{value}}:{{key}}--{{index}}</p>
</div>
</body>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            user:[
                {name:'tom',age:22},
                {name:'yagd',age:7}
            ],
            animal:{
                name:'aaa',
                age:12
            }
        }
    })
</script>
</html>

v-model

<body>
<div id="app">
    <!-- v-model指令用来双向数据绑定：就是model和view中的值进行同步变化 -->
    <!-- v-model只能在input/textarea/selet -->
    <input type="text" v-model="name">
    <p>你输入的内容是：{{name}}</p>
</div>
</body>
<script >
    let vm = new Vue({
        el:"#app",
        data:{
            name:''
        }
    })
</script>

v-on

<body>
<!--
       v-on指令用来监听dom事件
       使用方法：
         1. 在标签的属性位置写上v-on:任意的事件类型="执行的函数"
         2. 简写：@任意的事件类型="执行的函数" （推荐）
         3. 通过执行函数添加参数
         4. 通过执行函数中添加$event参数传递事件对象，注意只能是$event,并且不能加引号
         5. 事件修饰符可以给事件添加特殊功能 .stop .prevent
         6. 可以给和按键相关的事件添加按键修饰符 常用的有 .enter
      -->
<div id="app">
    <h1>yourname:{{name}}</h1>
    <button v-on:click="changeMsg">点击改变姓名</button>
    <!-- 简写-->
    <button @click="changeMsg">简写改变</button>
    <button @click="changeMsgbytags('niubi')">传参改变</button>
    <button @click="getEvent($event)">事件</button>
    <!-- 阻止默认事件的执行-->
    <a href="http://www.baidu.com" @click.prevent="changeMsg">跳转</a>
    <!-- 按键修饰符-->
    <input v-on:keyup.13="submit">
    <input v-on:keyup.enter="submit">
</div>
</body>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            name:'tom'
        },
        methods:{
            changeMsg(){
                this.name='hhhh'
            },
            changeMsgbytags(arg){
                this.name=arg
            },
            //事件
            getEvent(e){
               console.log(e);
            },
            submit(){
                console.log('submit');
            }
        }
    })
</script>

v-if和v-show

<body>
<!-- v-if和v-show指令可以用来控制元素的显示和隐藏 v-if="布尔值" v-show="布尔值" 布尔值为true元素显示，false隐藏 -->
<!-- 区别：
    v-if通过控制dom来控制元素的显示和隐藏
    v-show通过控制样式display:none来控制元素的显示与隐藏
    使用场景区别
    1. 涉及到大量dom操作的时候，我们需要使用v-show
    2. 涉及到异步数据渲染的时候就要使用v-if
 -->
<div id="app">
    <h1>v-if</h1>
    <p v-if="isVisiable">aaa</p>
    <h1>v-show</h1>
    <p v-if="isVisiable">bbb</p>
    <button @click="isVisiable=!isVisiable">显示/隐藏</button>

    <div v-if="age >18">已成年</div>
    <div v-else-if="age >6">少年</div>
    <div v-else>儿童</div>
</div>
</body>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            isVisiable:'true',
            age:20
        },
        methods:{
            change(){
                this.isVisiable=false
            }
    }
    })
</script>

v-cloak

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 1. 给闪烁的元素加上v-cloak指令 -->
    <!-- 当vue实例结束编译之后（vue文件加载完成之后）， v-cloak会被删除-->
    <p v-cloak>{{msg}}</p>
</div>
</body>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
        msg:'hello'
        }
    })
</script>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2.js"></script>
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="add">
        编号:
        <input type="text" v-model="newId"> 品牌名称:
        <input type="text" v-model="newName">
        <input type="button" value="添加" @click="addData">
    </div>

    <div class="add">
        品牌名称:
        <input type="text" placeholder="请输入搜索条件">
    </div>

    <div>
        <table class="tb">
            <tr>
                <th>编号</th>
                <th>品牌名称</th>
                <th>创立时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item, index) in list" :key="index">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td>
                    <!-- 将index作为参数传入 -->
                    <a href="#" @click="delete(index)">删除</a>
                </td>
            </tr>
            <tr v-if="list.length === 0">
                <td colspan="4">没有品牌数据</td>
            </tr>
            <!-- 动态生成内容tr -->
        </table>
    </div>
</div>
</body>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            newId:'',
            newName:'',
            list:[
                {id: 1, name: 'CC', ctime: new Date()},
                {id: 2, name: 'LV', ctime: new Date()},
                {id: 3, name: 'AA', ctime: new Date()},
            ],
            methods:{
                addData(){
                    this.list.push({id:this.newId,name:this.newName,ctime:new Date()})
                },
                delete(idx){
                    this.list.splice(idx,1)
                }
            }

        }
    })
</script>
</html>

vue学习回顾第一天

为什么要学习vue

什么是mvvm

vue常用系统指令

vue的使用

插值表达式

v-text

v-html

v-bind

v-for

v-model

v-on

v-if和v-show

v-cloak

案例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读