vue学习笔记 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name='viewport' content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>document1</title>
  <script src='../lib/vue-2.4.0.js'></script>
  <!-- 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数 -->
</head>
<body>
  <!-- 将来new 的 vue 的实例 -->
  <div id='app'>
    {{msg}}
  </div>

  <script>
    //  创建一个vue的实例
    var vm = new Vue({
      el:'#app', //表示，当前我们new 的vue 实例，要控制页面上的哪个区域
      data:{//data 属性中，存放的是el中要用到的数据
        msg:"vue视频课程",
      },
      methods:{

      }
    })
  </script>
</body>
</html>

 

1、 mvc mvvm
mvc model(数据操作) v(视图) c(控制器)
mvvm  m(data)  v(html内容 div)  vm(new Vue())

2、 学习基本代码
代码,如上

3、 差值表达式 v-cloak v-text v-html
v-cloak:说明该标签是插值表达式，可以定义样式，可以解决网速慢时闪烁问题
[v-cloak]{
display: none;
}
v-text='变量'和{{}}用法类似，区别v-text默认没有闪烁问题，v-text会覆盖元素中原本的内容
v-html='变量' 若data属性含html标签会编译出来，而不是直接输出
v-bind:属性 vue中用于绑定属性的指令 缩写 :属性=
v-on:事件 vue中绑定事件指令 缩写 @事件=
案例：响马灯

4、事件修饰符，如 <input type="button" value="戳他" @click.stop="btnHandler">
stop 防止冒泡，从里到外
prevent 阻止默认事件
capture 触发捕获机制，从外到里
self 实现只有点击当前元素时候，才会触发事件处理函数,和stop不同，若冒泡遇上self元素会跳过，若外面还包裹元素，冒泡仍然会继续，但stop就此停止。
once 只触发一次事件处理函数 <a href="http://www.baidu.com" @click.prevent.once="linkClick">

5、v-model='msg' 数据的双向绑定 v和m互相影响
<input type="text" style="width:100%;" v-model="msg">
案例：计算器

6、class类样式
1/<h1 class="red thin">
2/<h1 :class="['thin', 'italic']">
3/<h1 :class="['thin', 'italic', flag?'active':'']">或 <h1 :class="['thin', 'italic', {'active':flag} ]">
//flag mv 定义三元表达式，后面是缩写
4/<h1 :class="classObj"> 或<h1 :class="{ red: true, thin: true, italic: false, active: false }"> //对象
data: {
flag: true,
classObj: { red: true, thin: true, italic: false, active: false }
},

7、style内联样式
1/<h1 :style="{ color: 'red', 'font-weight': 200 }">或<h1 :style="styleObj1">
2/<h1 :style="[ styleObj1, styleObj2 ]">
data: {
styleObj1: { color: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
},

8、v-for遍历
1/ 遍历普通数组
<p v-for="item in list">{{item}}</p>
2/ 需要索引
<p v-for="(item, i) in list">
索引值：{{i}} --- 每一项：{{item}}
</p>
data: {
list: [1, 2, 3, 4, 5, 6]
},
3/ 遍历复杂数组
<p v-for="(user, i) in list">
Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}
</p>
data: {
list: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
]
}
4/ 遍历对象
<p v-for="(val, key, i) in user">
值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}
</p>
data: {
user: {
id: 1,
name: '托尼·屎大颗',
gender: '男'
}
},
5/迭代数字
<p v-for="count in 10">这是第 {{ count }} 次循环</p>

6/ key的使用注意方式，标志遍历次序唯一标识符,
<p v-for="item in list" :key="item.id">当选中元素后，在数组内添加减少元素的时候，就不会错乱
注意：v-for 循环的时候，key 属性只能使用 number获取string


9、v-if / v-show
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
data: {
flag: false
},
<!-- v-if 的特点：每次都会重新删除或创建元素 -->
<!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->

 

posted on 2018-09-12 10:49  longlongcheng  阅读(154)  评论(0)  编辑  收藏  举报

导航