1，vue导入（最重要）

导入方法和jq类似。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
之后

  1.     <!-- 创建一个vue根节点 -->
  2.     <div class="app">
  3.         <!-- 那么这里的所有内容都可以用vue实例进行管理 -->
  4.         <!-- 插值就是一个数据占位符 -->
  5.         <p>用户名: {{username}}</p>
  6.         <p>{{username + ', php.cn讲师'}}</p>
  7.         <p>10 + 30 = {{ 10 + 30}}</p>
  8.         <p>{{flag ? '上午好' : '睡觉了'}}</p>
  9.     </div>
  11.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  13.     <script>
  14.         const vm = new Vue({
  15.             // 当前Vue的配置项
  16.             // 挂载点
  17.             // el: document.querySelector('.app') 可简写
  18.             el:'.app',
  19.             // 
  20.             data:{
  21.                 username:'张三',
  22.                 flag:false,
  23.             }
  24.         })

如何查看data

  1. // 查看
  2.         console.log(vm.$data.username);
  3.         // 在data中声明的所有变量都自动变成vue实例的属性
  4.         // 以上的过程就是数据注入
  5.         console.log(vm.username);
  7.         vm.username='李四';

2，vue中的几个常用指令

1。v-text v-html

  1.     <div class="app">
  2.         <p v-text="username">李四</p>
  3.     </div>
  1.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2.     <script>
  3.         const vm = new Vue({
  4.             el: '.app',//不能挂在body和html上，它们有唯一性。
  5.             data: {
  6.                 username: "张三",
  7.             },
  8.         })

v-text, v-html 在 html 中是不存在这样的属性的，它是专门由 Vue 实例管理的自定义属性，称之为“指令”。

v-text 指令 ====> innerText，textContent,它会覆盖掉原来的文本内容。p标签的李四会被张三覆盖

v-html
v-html 指令 ====> innerHTML, 它里边就不仅仅是纯文本了，还可以是 html 字符串

  1.     <div class="app">
  2.         <p v-html="username">李四</p>
  3.     </div>
  5.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  6.     <script>
  7.         const vm = new Vue({
  8.             el: '.app',
  9.             data: {
  10.                 username: "<em style='color:red'>王五</em>",
  11.             },
  12.         })
  13.     </script>

2。v-bind, v-on 指令

v-bind 指令是一个高频指令，它的作用是动态地绑定一个或多个 属性，或一个组件 prop 到表达式。它可以简写成冒号 “:”。

  1. <style>
  2.         .active {
  3.             color: violet;
  4.         }
  6.         .bigger {
  7.             font-size: 2rem;
  8.         }
  9.     </style>
  1.     <div class="app" >
  2.         <!-- 绑定style属性 -->
  3.         <p v-bind:style="style1">style: {{site}}</p>
  4.         <!-- v-bind:是高频指令可简写成冒号 -->
  5.         <p :style="`color:red`">style: {{site}}</p>
  7.         <!-- 绑定类class属性 -->
  8.         <p :class="`active bigger`">class1: {{site}}</p>
  9.         <p :class="class1">class2: {{site}}</p>
  10.         <!-- 控制样式的开关 -->
  11.         <p :class="{active: isActive, bigger: isBigger}">class3: {{site}}</p>
  12.         <p :class="[`active` ,`bigger`]">class4: {{site}}</p>
  13.     </div>
  15.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  16.     <script>
  17.         const vm = new Vue({
  18.             el: '.app',
  19.             data: {
  20.                 site: 'php中文网',
  21.                 style1: 'color:red',
  22.                 class1: `active bigger`,
  23.                 isActive: true,
  24.                 isBigger: false,
  25.             },
  26.         })
  27.     </script>


v-on 指令：绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
v-on 指令同样是一个高频指令，它可以简写成 “@”

  1.     <div class="app" >
  3.         <!-- 绑定事件 -->
  4.         <p><a href="https://php.cn" v-on:click="show">显示网站名称1</a></p>
  5.         <!-- 下面就阻止a标签的默认跳转行为 -->
  6.         <!-- 事件修饰符prevent:防止元素的默认行为 -->
  7.         <!-- v-on也是高频指令,可以简写为: @ -->
  8.         <p><a href="https://php.cn" @click.prevent="show">显示网站名称2</a></p>
  9.         <!-- stop:阻止冒泡 -->
  10.         <p><a href="https://php.cn" @click.prevent.stop="show">显示网站名称3</a></p>
  11.         <!-- 仅允许执行一次 -->
  12.         <p><a href="https://php.cn" @click.prevent.stop.once="show">显示网站名称仅一次</a></p>
  14.         <!-- 事件方法的传参 -->
  15.         <!-- 事件对象的参数名必须是 $event  -->
  16.         <button @click.stop="handle($event, 100, 200)">click</button>
  17.     </div>
  19.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  20.     <script>
  21.         const vm = new Vue({
  22.             el: '.app',
  23.             data: {
  24.                 site: 'php中文网',
  25.                 style1: 'color:red',
  26.                 class1: `active bigger`,
  27.                 isActive: true,
  28.                 isBigger: false,
  29.             },
  30.             methods: {
  31.                 show() {
  32.                     // this: 就是当前的vue实例对象
  33.                     alert(this.site)
  34.                 },
  35.                 handle(ev, a, b) {
  36.                     console.log(ev.type, ev.target);
  37.                     console.log("%d + %d = %d", a, b, (a + b));
  39.                 }
  40.             },
  41.         })
  42.     </script>

3。v-model双向绑定

一般情况下页面上的数据都是响应式的，也就是单向绑定，就是页面中的数据随着 vue 实例中的数据变化而变化，而 v-model 指令的作用就是在表单控件或者组件上创建双向绑定。只要任何一方的数据发生变动，另一方的数据也会发生变化。

  1.     <div class="app">
  2.         <p>模型中的数据: {{site}}</p>
  3.         <p></p>
  5.         <!-- <p>双向绑定: <input type="text" :value="site" @input="site=$event.target.value"></p> -->
  6.         <!-- 因为这种双向绑定比较常用,vue提供了一个语法糖 -->
  7.         <!-- v-mode="site", ====> @input="site=$event.target.value" -->
  8.         <p>双向绑定: <input type="text" v-model.lazy="site"></p>
  9.         <p>双向绑定: <input type="text" v-model.number="num"></p>
  10.         <p>{{typeof num}}</p>
  11.     </div>
  12.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  13.     <script>
  14.         const vm = new Vue({
  15.             el: '.app',
  16.             data: {
  17.                 site: 'php中文网',
  18.                 num: "0",
  19.             }
  20.         })
  22.         // vm.site = 'php.cn'
  23.     </script>

4。v-for

v-for:简单来说就是遍历一个数组/对象，不过在 vue 中的 v-for 不是那么简单，它可以用来动态的生成列表。
v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊属性 key 来提供一个排序提示。key 只能是整数或是不重复的字符串，只有唯一，它才可以作为排序时的关键信息。

  1.     <div class="app">
  2.         <!-- key: 可以干预diff算法 -->
  3.         <!-- vue通过稳定且唯一的key值判断这个节点是否需要重新渲染, 以提升效率 -->
  4.         <!-- key只能是整数或不重复的字符串 -->
  5.         <ul>
  6.             <li v-for="(item,index) in items" :key="index">{{index}}--{{item}}</li>
  7.         </ul>
  10.         <ul>
  11.             <li v-for="(item,prop,index) in user" :key="prop">{{prop}}--{{index}}--{{item}}</li>
  12.         </ul>
  14.         <ul>
  15.             <li v-for=" (user, index) in users" :key="user.id">{{user.id}}--{{user.name}}--{{user.email}}</li>
  16.         </ul>
  18.         <span v-for="(n,i) in 10" :key="i">{{i}}--{{n}}<br></span>
  22.     </div>
  23.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  24.     <script>
  25.         const vm = new Vue({
  26.             el: ".app",
  27.             data: {
  28.                 // 数组
  29.                 items: ["合肥", "苏州", "杭州"],
  30.                 // 对象
  31.                 user: {
  32.                     name: "天蓬",
  33.                     email: "tp@php.cn",
  34.                 },
  35.                 //   对象数组, 数据表的查询结果就是一个二个这样的二维的JSON
  36.                 users: [
  37.                     { id: 1, name: "天蓬", email: "tp@php.cn" },
  38.                     { id: 2, name: "灭绝", email: "mj@php.cn" },
  39.                     { id: 3, name: "西门", email: "xm@php.cn" },
  40.                 ],
  41.             },
  42.         });
  43.     </script>

更多相关文章

  1. Android(安卓)数据绑定视图 dataBinding
  2. DataBinding
  3. android scrollview中嵌套expandablelistview
  4. android使用同一个RecyclerView实现两种不同Item布局
  5. android水平循环滚动控件
  6. Android菜鸟进阶之路一-Android基础
  7. Android之Adapter系列之SimpleAdapter类
  8. Java乔晓松-android的四大组件之一Service(服务的绑定)
  9. Android—Service详解—模拟点击抽奖(2020.7.3)

随机推荐

  1. android百度地图标记点代码
  2. Android原始XML的读写操作
  3. Android _Android登录对话框实现（1）
  4. Android系统启动-SystemServer下篇
  5. Android涉及到的设计模式
  6. Android中遍历文件夹、比较文件类型测试
  7. Android的手机震动
  8. android 9.0默认launcher
  9. Android Tutorial: Optimizing for Phone
  10. android 触摸手指动作放大和缩小图片