Vue.基础知识第一天

Posted 2021-04-16 Mythqian

1.vue运行环境:

直接下载  https://cn.vuejs.org/v2/guide/installation.html 开发环境后,在script标签中引入

2.创建vue对象

 var app =  new Vue({
       el:'#div',
       data:{
           shuju:"<h1>i am a test</h1>"
       }
   });

3. 指令

1. v-text 显示文本

2. v-html 显示html (不建议使用,危险,容易注入他人代码)

3. v-bind 控制属性 (简写 :    单向数据绑定)     eg:

   
   




4. v-model 双向数据绑定
1. 限制 标签: <input>       <select>     <textarea>
2. text 和 textarea 元素使用 value property 和 input 事件；
3. checkbox 和 radio 使用 checked property 和 change 事件；
4. select 字段将 value 作为 prop 并将 change 作为事件。
   修饰符 1.lazy 失去焦点再显示
   2.trim 去除前后空格
   3.number 转化数字, 不能转的不会报错
   可以 链式操作
5. v-on: 绑定事件  (方法参数 加 $event 获取事件对象)

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->      

  <!-- 添加事件监听器时使用事件捕获模式 -->

  <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div>

  <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->

  <!-- 即事件不是从内部元素触发的 -->

  < div v-on:click.self="doThat">...</div>

     

6. v-show: 原理用css 属性 display控制 显示和隐藏

7. v-if v-else-if v-else 和普通的 if else 逻辑一致

8. v-for:  vvv代表值  k代表键

10. v-cloak 控制在vue没有通过网络加载成,暂时隐藏 vue控制的属性

[v-cloak]{
            display: none;
        }