Vue.js的基本代码和常见指令

最新推荐文章于 2024-05-10 14:59:15 发布

攻城狮-张小白

最新推荐文章于 2024-05-10 14:59:15 发布

阅读量332

点赞数 2

分类专栏： Vue.js 文章标签： Vue.js

本文链接：https://blog.csdn.net/weixin_45067101/article/details/90339990

版权

Vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue.js 是一套构建用户界面的框架，只关注视图层，不操作dom，它不仅易于上手，还便于与第三方库或既有项目整合。
Vue的基本代码：

      <!-- 1、导入vue包    去官网下载 -->
    <script src="./vue-2.4.0.js"></script> 
<body>
<!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
    <div id="app">
        <p>{{msg}}</p>  //  {{msg}}是插值表达式
        <p>lalala:{{age}}岁</p>
    </div>
    <script>
      <!-- 2、创建一个Vue实例 ，当我们导入vue包的时候 就多了一个 Vue 构造者-->
        let vm = new Vue({
            el: "#app",      // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
            data: {     // data 属性中，存放的是 el 中要用到的数据
                msg: "我是Vue",    //通过Vue 中的指令，你会很方便的把数据渲染到页面，不需要再手动去操作dom
            }
        })
    </script>
</body>

Vue中的常见指令：
1、 v-text：会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，不会覆盖其元素中原本的内容
2、 v-clock：解决插值表达式闪烁，不常用

	<p v-cloak>++++++++ {{ msg }} ----------</p>
	<h4 v-text="msg">msg的值会把我覆盖掉</h4>

3、 v-html：会覆盖元素中原本的内容，可以解析html标签

<div v-html="msg">1212112</div>        //data中的msg： msg2: '<h1>我是h1</h1>'

4、 v-bind:是vue中提供用于绑定属性的指令简写为 :要绑定的属性，v-bind中可以写合法的js表达式
5、 v-on:是用来注册事件的，v-on:click="",值一般为一个事件函数，事件函数定义在methods里面，data里面是定义数据的，methods和data是同级的，点击事件可以简写为@click

 <input type="button" value="按钮" v-bind:title="mytitle + '123'" v-on:click="show">
 
 <input type="button" value="按钮" :title="mytitle + '123'" @click="show">   //简写
 
 methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
            show: function() {
                alert('Hello')
            }
        }

6、事件修饰符：@click.stop
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式，从外到里
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
- .once 事件只触发一次

7、v-model 实现双向数据绑定只在表单元素中有

<input type="text" v-model="msg">

8、v-for 指令的四种使用方式需要配合data中的数据进行循环

1.v-for循环普通数组
	   <p v-for="(item,i) in user">{{item}}</p>
2.v-for循环对象数组
       <p v-for="(item,i) in user">id:{{item.id}}----name:{{item.username}}</p>
3.v-for循环对象，在遍历对象身上的键值对的时候，除了val，key还有第三个 索引 很少用
        <p v-for="(val,key,i) in user">值:{{val}}--键:{{key}}</p>
4.v-for迭代数字
        <p v-for="count in 10">{{count}}</p>
<p v-for="(item,i) in user" :key="item.id">{{item}}</p>
key的作用其实就是让v-for循环的每一项具有唯一标识，通过唯一标识来记录那一项
     切记：key的参数值只能是字符串或数值

9、 v-if 的特点：每次都会重新删除或创建元素
有较高的切换性能消耗，如果元素涉及到频繁的切换，最好不要用v-if，建议用v-show

10、v-show 的特点：每次不会重新删除或创建元素操作，只是切换元素的display:none 样式
有较高的初始渲染消耗，如果只用一次的话，建议用v-if

攻城狮-张小白

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue.js的基本代码和常见指令

Vue.js 是一套构建用户界面的框架，只关注视图层，不操作dom，它不仅易于上手，还便于与第三方库或既有项目整合。Vue的基本代码：  <script src="./vue-2.4.0.js"></script> <body><!-- 将来 new 的Vue实例，会控制这个元素中的...
复制链接

扫一扫