1、TCL脚本基本语法（概要）
983 2023-04-03 03:20:37
01-Vue模板语法
一、Vue => 渐进式 js 框架
- 官网：cn.vuejs.org/v2/guide/ or vuejs.bootcss.com/guide/
- 优点：
- 易用（熟悉HTML、CSS、js知识后，可快速上手）
- 灵活（库和框架之间自如伸缩）
- 高效（20kb运行大小）
二、Vue基本使用
代码部分
<div id="app"> <div>{{msg}}</div><!-- 1.提供标签用于填充数据 插值表达式--> <div>{{1+2}}</div> <div>{{msg+'----'+'123'}}</div></div> <script type="text/javascript" src="js/vue.js"></script><!-- 2.引入 vue.js 库文件 --> <script type="text/javascript"> var vm = new Vue({ // 3.使用 vue语法做功能 el:'#app', // el:告诉vue,你要把这个数据填充到什么位置 // #app:严格的id选择器 data: { // data:用于提供数据 msg:'hello vue' } }); //用于存储vue的实例 </script>浏览器显示部分
1. 基本使用步骤：
- 提供标签用于填充数据
- 引入 vue.js 库文件
- 使用 vue语法做功能
- 把vue提供的数据填充到标签里面
2. HelloWorld 细节分析
1). 实例参数分析：
- el : 元素的挂载位置（关联），值可以是css或者dom
- data : 模型数据（值是一个对象）
2). {{插值表达式}}用法：
三、模板语法概述
1. 前端渲染：
把数据填充到HTML标签中。
2. 前端渲染方式：
3. 模板语法概览
- 差值表达式
- 指令
- 事件绑定
- 属性绑定
- 样式绑定
- 分支循环结构
四、指令
1. v-clock => 闪动问题
原理 ：先通过样式隐藏 再替换 替换好了再显示出来
- css
[v-cloak] { display: none;}- html
<div v-cloak>{{msg}}</div>2. v-text => 直接显示文本
<div v-text='msg'></div>3. v-html 可以使用标签
<div v-html='msg'></div> <!-- msg:'<h1>html</h1>' -->4. v-pre显示原始代码
5. v-once只编译一次
就是在控制器中 使用vm.msg可以改变页面中msg的值 但是如果给他加上v-once就只能是他最初编译出来的 不能再修好了
6. 数据响应式
数据的变化导致页面内容的变化
五、 双向数据绑定
1. v-model 双向绑定
<div id="app"> <div>{{msg}}</div> <div> <input type="text" v-model='msg'> <!-- 页面影响数据 通过修改input中的值 可以直接影响到上面插值表达式中的值 --> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data: { msg:'hello' } }); </script>2. MVVM（model view View-Model）
model数据
view视图 模板 dom
View-Model 结合
3. 事件绑定 v-on :
cn.vuejs.org/v2/api/#v-o…
<button v-on:click='num++'>{{num}}</button><button @click='num++'>{{num}}</button>函数形式
<div id="app"> <div> <button v-on:click='handle'>{{num}}</button> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data: { num: 0 }, methods: { handle: function() { this.num++; // this是vue的实例对象 } } }); </script>接收事件对象
- 事件对象必须是参数传递的最后一个，且事件对象的名称必须是
$event
<div id="app"> <div> <button v-on:click='handle(123, $event)'>{{num}}</button> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data: { num: 0 }, methods: { handle: function(a, event) { console.log(a); // 123 console.log(event.target.tagName); // BUTTON console.log(event.target.innerHTML); // 0 this.num++; // this是vue的实例对象 } } });(1). 事件修饰符
- 阻止冒泡
@click.stop
<div id="app"> <div>{{num}}</div> <div @click='handle0()'> <button @click.stop='handle1()'>点击1</button> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data: { num: 0 }, methods: { handle0: function() { this.num++; }, handle1: function() { } } }); </script>- 阻止默认行为
.prevent
<a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a><!-- 阻止跳转 -->(2). 按键修饰符
cn.vuejs.org/v2/guide/ev…
- 回车键
@keyup.enter
<div id="app"> <div> 用户名：<input @keyup.enter='handle1' v-model='name'> <button @click='handle1'>点击1</button> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data: { name: '' }, methods: { handle1: function() { console.log(this.name); } } });删除键
@keyup.delete自定义按键修饰符
Vue.config.keys.f1=112
<div id="app"> <div> 用户名：<input @keyup='handle1' v-model='name'> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data: { name: '' }, methods: { handle1: function(event) { console.log(event.keyCode); } } }); </script>4. 属性绑定 v-bind
<a v-bind:href='url'>跳转</a><a :href='url'>跳转</a>双向数据绑定的三种不同形式
<input type="text" v-bind:value="msg" v-on:input="handle"> <!-- handel：function(event) { this.msg = event.target.value; } --> <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value"> <input type="text" v-model="msg">5. 样式绑定 v-bind
(1). class
对象
<style> .active { height: 100px; width: 150px; background-color:blueviolet; } .error { border:coral 2px solid; } </style></head> <div id="app"> <div> <div :class="{active: isActive, error: isError}"></div> <button @click="handle">点击</button> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data: { isActive: true, isError: true }, methods: { handle: function() { this.isActive = !this.isActive; // 使isActive的值在true flase之间跳动 this.isError = !this.isError; } } }); </script>数组
<style> .active { height: 100px; width: 150px; background-color:blueviolet; } .error { border:coral 2px solid; } </style></head> <div id="app"> <div> <div :class="[activeClass, errorClass]"></div> <button @click="handle">点击</button> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data: { activeClass: 'active', errorClass: 'error' }, methods: { handle: function() { this.activeClass = '', this.errorClass = '' } } }); </script>二者可以结合
可以简化操作
arrClasses: ['active', 'error']arrClasses: {active: true,error: true}默认class会保留
(2). style
<div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div><div id="app"> <div v-bind:style='objStyles'></div> <!-- 对象 --> <div v-bind:style='[objStyles, overrideStyles]'></div> <!-- 数组 --> <button v-on:click='handle'>切换</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { borderStyle: '1px solid blue', widthStyle: '100px', heightStyle: '200px', objStyles: { border: '1px solid green', width: '200px', height: '100px' }, overrideStyles: { border: '5px solid orange', backgroundColor: 'blue' } }, methods: { handle: function(){ this.heightStyle = '100px'; this.objStyles.width = '100px'; } } }); </script>六、分支循环结构
1. v-if 如果
<div v-if=' score >= 90 '>优秀</div> <div v-else-if='score<90 && score>=80'>一般</div> <div v-else>较差</div>2. v-show 是否展示
即使没有显示但也渲染到了页面
变化频繁选择这个
<div v-show='flag'>较差</div> <!-- flag: true -->3. v-for 遍历
<div id="app"> <div>水果列表</div> <ul> <li v-for='item in fruits'>{{item}}</li> <!-- 关键字 in 属性名 --> <li v-for='(item, index) in fruits'>{{item + '---' + index}}</li> <!-- 关键字+索引 in 属性名 --> <li v-for='item in myFruits'> <span>{{item.ename}}</span> <span>{{item.cname}}</span> </li> </ul> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { fruits: ['apple', 'banana', 'orange'], myFruits: [{ ename: 'apple', cname: '苹果' }, { ename: 'banana', cname: '香蕉' }, { ename: 'orange', cname: '橘子' },] } }); </script>4. key 加唯一属性id
给data里面每个对象加id
再用:key = item.id
5.v-for v-if结合
<div id="app"> <div v-for='(v, k, i) in obj'>{{v + '---' + k + '---' + i}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { obj: { uname: 'x52', age: '20', sex: 'male' } } }); <div v-for='(v, k, i) in obj' v-if='v == 13'>{{v + '---' + k + '---' + i}}</div>免责声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕。
相关文章
