Vue基础部分笔记-變量-匯編語言學習筆記

Vue基础部分笔记

2023-09-06 阅读 19 评论 0

摘要：Vue Vue就是基于MVVM模式实现的一套js框架(函数库)，在vue中：Model:指的是js中的数据，如对象，数组等等。View:指的是页面视图 Vue.js 的目标是通过尽可能简单实现响应的数据绑定和组合的视图组件 1.vue的基本使用提示： {{两个大括号之间不

Vue

Vue就是基于MVVM模式实现的一套js框架(函数库)，在vue中：Model:指的是js中的数据，如对象，数组等等。View:指的是页面视图

Vue.js 的目标是通过尽可能简单实现响应的数据绑定和组合的视图组件

1.vue的基本使用

提示：
- {{两个大括号之间不能有空格(标准胡子语法)
- vue的代码一般写在要控制的标签下面,写在body中也是可以的,因为他没有入口函数.

<!--引入Vue.js-->
<script src="./js/vue.min.js"></script><!-- vue显示数据：从胡子语法开始{{data}} -->
<div id='app'>{{str}}</div>
<script>var vm = new Vue({el: '#app',  // Vue要控制的标签// Vue要绑定的数据data: {str: 'hello ' //最终div中显示的数据为 hello}})
</script>

2、Vue的模板语法

Vue显示数据方法

<body><!-- Vue数据显示方法--><div id="app"><div>{{ str }}</div><p>{{ str.split('').reverse().join('') }}</p><span>{{ num+1 }}</span><!-- 三元运算符  三元表达式 -->  <!-- 条件?条件成立:条件不成立 -->        <div>{{ bool?'成立':'不成立' }}</div></div><script>var vm = new Vue({el: '#app',data: {str: 'abcdefg',num: 0,bool: false}})</script>
</body>

Vue控制html属性

<body><!-- 数据显示方法  vue控制html属性  绑定事件和vue封装函数 --><div id="app"><!-- v-xx -- 指令：具备特殊功能的语法   --><a v-bind:href="url1">百度</a>  <!-- v-bind 完整写法控制html属性 --><a :href="url2">淘宝</a>  <!-- : 化简写法控制html属性 --></div><script>var vm = new Vue({el: '#app',data: {str: 'abcdefg',num: 0,bool: true,url1: 'http://www.baidu.com',url2: 'http://www.taobao.com'}})</script>
</body>

Vue绑定事件

       <!-- 绑定事件和vue封装函数 --><div id="app"><span>{{ num+1 }}</span><br><button v-on:click="num += 1">按钮</button>   <button @click="num+=1">按钮（化简写法）</button>  <!-- 绑定事件主要写法 @事件类型="要执行的函数"--><button @click="fnAdd()">调用函数：num自增</button> <!-- 调用函数的时候，如果没有参数可不写小括号--></div><script>var vm = new Vue({el:'#app',data:{num: 0},methods:{// 封装函数// 函数名: 匿名函数fnAdd:function(){// num 累加1this.num += 1}}})</script>

3、Vue控制class属性

使用v-bind指令来设置元素的class属性或者sytle属性，它们的属性值可以是表达式，vue.js在这一块做了增强

    <!-- el  data: 只要数据变，页面视图就变 --><div id="app"><!-- class属性:字典  对象   列表 --><!-- 字典:{'类名':布尔值} true添加类 false不添加类 --><div :class="{'myclass1':bool1,'myclass2':bool2}">111</div><!-- 对象:key是真实的类名,如果取值true则添加类 --><div :class="myobject">222</div><!-- 列表,将列表中的键锁对应的值添加类 --><div :class="[mynames1,mynames2]"></div><!-- 三元运算符 bool1为true时 为abc  bool1为false时添加fgh --><div :clas="[bool1 ? 'abc' : 'fgh' ]"></div></div><script>var vm = new Vue({el: '#app',data: {bool1: true,bool2: false,myobject: {class1: true,class2: false},mynames1: 'aaa',mynames2: 'bbb'}})</script>

原文链接：https://hbdhgg.com/2/9908.html

发表评论: