Vue安装以及指令的基础使用

Vue初识

1.vue特点：易用，灵活，高效

2.渐进式：根据需求的不同加载不同模块

3.库和框架的区别：

库：jq ....js 功能单一

框架:vue react angular

4.vue核心：

数据驱动

组件化

5.vue安装

a.cdn方式需要引入的开发版本

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

b.npm install vue

<script src="./node_modules/vue/dist/vue.js"></script>

c.直接下载vue.js

<script src="./vue.js"></script>

6.创建关联

1)不能绑定到 html,body上

2)要绑定到页面的唯一元素上，也就是绑定id

3)如果非要绑定到类名上，那么只显示第一个内容

Vue常见的指令

v-text/v-html v-html识别标签，v-text不识别标签

 <!-- 插值表达式 胡子语法 -->
 {{name}}
 <!-- {{a}} 这是没有声明错误的 -->
 <!-- 解决双括号闪烁问题 通过指令-->
 <div v-html='name'></div>
 <div v-text='name'></div>

v-if,v-show v-if:直接移除元素 v-show:通过display：none设置元素应用场景：如果频繁切换元素需要用v-show

 <div v-if='false'>我是要显示的元素111</div>
 <div v-if='isShow'>我是要显示的元素2222</div>

v-if/v-show v-else-if v-else 注意：v-if v-else 中间不允许有内容

 <div v-if='flag'>我是测试显示的</div>
 <div>我是中间内容</div>
 <div v-else>我是测试隐藏的</div>

v-bind 绑定属性

  <!-- v-bind简写: -->
  <div :abc='abc'>我是div</div>

v-on 绑定方法

<!-- v-on：的简写方式:@ -->
<button @click='fn'>点击弹出内容</button>

v-model:数据的双向绑定只能应用于表单元素

 <div >{{content}}</div>
 <input type="text" v-model='content'>

绑定样式

:class 方式绑定:

 <div class="box div3">我是div</div>
 <!-- 通过绑定属性的方式 -->
 <div :class='box'>我是div2</div>
 <!-- 通过三元方式添加样式 -->
 <div :class='[1==2?box:div3]'>我是div3</div>
 <!-- 复合样式-->
 <div :class='box+" div3"'>我是div4</div>

:style 方式绑定:

<div style='width: 100px;height: 100px;'>我是div</div>
<!-- style的行内样式 -->
<div :style='obj'>我是div2222</div>
<div :style='[obj,obj1]'>我是div33333</div>

知识点: :key的作用; 绑定一个唯一值，避免勾选不正确的问题与v-for的固定搭配


key使用例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-for='(item,index) in list' :key='item.id'>
            <input type="checkbox">
           {{index+1}}---- {{item.name}}---{{item.age}}
          
        </div>
        <div>
            姓名: <input type="text" v-model='user.name'>
        </div>
        <div>
            年龄: <input type="text" v-model='user.age'>
        </div>
        <div>
            <button @click = 'add'>添加</button>
            <button @click = 'reset'>重置</button>
        </div>
    </div>

</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app', 
        data: {
            user:{
                name:'张三',
                age:20
            },
            list:[
                {id:1,name:'李四',age:15},
                {id:2,name:'王五',age:25},
                {id:3,name:'赵六',age:35},
            ]
        },
        methods: {
            // 重置数据  this 指的就是vue的实例
            reset(){
               this.user={
                   name:'',
                   age:''
               } 
            },
            // 增加
            add(){
                // this.list.push({id:4,name:'王麻子',age:18})
                let obj = {id:4,name:'王麻子',age:18}
                this.list.splice(2,0,obj)
            }
        },
    })
</script>

</html>

posted @ 2020-11-27 20:53 堍堍阅读(63) 评论(0) 收藏举报

刷新页面返回顶部

Vue安装以及指令的基础使用

公告