Vue基础语法(一)

插值

1.1.1 `文本`
          {{msg}}
    1.1.2 html
          使用v-html指令用于输出html代码          
    1.1.3 `属性`
          HTML属性中的值应使用v-bind指令
    1.1.4 `表达式`
          Vue提供了完全的JavaScript表达式支持
          {{str.substr(0,6).toUpperCase()}}
          {{ number + 1 }}
          {{ ok ? 'YES' : 'NO' }}
          <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue插值</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- <script src="../js/vue.js"></script> -->
	</head>
	<body>
		<div style="margin-left: 700px;">
			<!-- 边界 -->
			<div id="app">

				<ul>
					<li>
						<h3>文本</h3>
						{{msg}}
					</li>
					<li>
						<h3>html字符串渲染</h3>
						<!--v-html 解析html字符串  -->
						<div v-html="htmlstr"></div>
					</li>
					<li>
						<h3>v-bind属性绑定指令</h3>
						<input type="text" value="19" /><br />
						<input type="text" v-bind:value="age" />
					</li>
					<li>
						<h3>Vue表达式</h3>
						{{str.substr(0,6).toUpperCase()}}
						{{ number + 1 }}
						{{ ok ? 'YES' : 'NO' }}
						<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
					</li>

				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				msg: 'hello Vue',
				htmlstr: '<span style="color: pink;">粉了</span>',
				age: 20,
				str:'https://www.baidu.com',
				number:6,
				ok:true,
				id:16
			}

		})
	</script>
</html>


指令

指的是带有“v-”前缀的特殊属性

1.2.1 核心指令

      (v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model



      v-if|v-else|v-else-if:根据其后表达式的bool值进行判断是否渲染该元素

        他们只能是兄弟元素

        v-else-if上一个兄弟元素必须是v-if

        v-else上一个兄弟元素必须是v-if或者是v-else-if



      v-show:与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none"



      v-for:类似JS的遍历,

             遍历数组: v-for="item in items", items是数组,item为数组中的数组元素

             遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名,index下标



      v-bind

      v-on

      v-model:用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值   

        v-for/v-model一起绑定[多选]复选框和单选框
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue指令</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- <script src="../js/vue.js"></script> -->
	</head>
	<body>
		
			<!-- 边界 -->
			<div id="app">

				<ul>
					<li>
						<h3>分支</h3>
						<div v-if="score > 90 ">A</div>
						<div v-else-if="score > 80 ">B</div>
						<div v-else-if="score > 70 ">C</div>
						<div v-else-if="score > 60 ">D</div>
						<div v-else="">E</div>
						<input type="text" v-model="score" />
					</li>
					<li>
						<h3>v-show指令</h3>
						<div v-show="flag">出来吧</div>
						<!--v-if和v-show的区别 
						 v-if 控制的是标签是否打印前台显示
						 v-show 控制的是标签的样式
						 
						 -->
					</li>
					<li>
						<h3>v-for指令</h3>
						<div v-for="item,index in data1">
							{{item}}--{{index}}<br />
						</div>
						<hr>
						<div v-for="item,index in data2">
							{{item.id}}-{{item.name}}-{{index}}<br />
						</div>
					</li>
					<li>
						<h3>动态参数</h3>
						<button v-on:[evname]="xxx">动态事件调用</button>
							<input type="text"  v-model="evname"/>
					</li>


				</ul>
			</div>
	
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				score: 100,
				flag: true,
				data1: [1, 3, 6, 9, 14],
				data2: [{
						id: 1,
						name: '星星'
					},
					{
						id: 2,
						name: '月亮'
					},
					{
						id: 3,
						name: '贩卖机'
					}
				],
				evname:'click',	

			},
			methods:{
				xxx(){
					console.log('xxx方法被调用!!!')
				}
			}

		})
	</script>
</html>


过滤器

  全局过滤器

   Vue.filter('filterName', function (value) {

     // value 表示要过滤的内容

   });

   局部过滤器

   new Vue({

     filters:{'filterName':function(value){}}

   });

 

   vue允许你自定义过滤器,被用作一些常见的文本格式化,格式如下:

   <!-- 在两个大括号中 -->

   {{ name | capitalize }}

 

   <!-- 在 v-bind 指令中 -->

   <div v-bind:id="rawId | formatId"></div>1:过滤器函数接受表达式的值作为第一个参数

   注2:过滤器可以串联     

        {{ message | filterA | filterB }}3:过滤器是JavaScript函数,因此可以接受参数:

        {{ message | filterA('arg1', arg2) }}4:js定义一个类

        function Stu(){};

        Stu.prototype.add(a,b){};//添加一个新的实例方法

Stu.update(a,b){};//添加一个新的类方法

 

   案例:首字母大写/日期格式化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue指令</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- <script src="../js/vue.js"></script> -->
	</head>
	<body>
		
			<!-- 边界 -->
			<div id="app">

				<ul>
					<li>
						<h3>分支</h3>
						<div v-if="score > 90 ">A</div>
						<div v-else-if="score > 80 ">B</div>
						<div v-else-if="score > 70 ">C</div>
						<div v-else-if="score > 60 ">D</div>
						<div v-else="">E</div>
						<input type="text" v-model="score" />
					</li>
					<li>
						<h3>v-show指令</h3>
						<div v-show="flag">出来吧</div>
						<!--v-if和v-show的区别 
						 v-if 控制的是标签是否打印前台显示
						 v-show 控制的是标签的样式
						 
						 -->
					</li>
					<li>
						<h3>v-for指令</h3>
						<div v-for="item,index in data1">
							{{item}}--{{index}}<br />
						</div>
						<hr>
						<div v-for="item,index in data2">
							{{item.id}}-{{item.name}}-{{index}}<br />
						</div>
					</li>
					<li>
						<h3>动态参数</h3>
						<button v-on:[evname]="xxx">动态事件调用</button>
							<input type="text"  v-model="evname"/>
					</li>


				</ul>
			</div>
	
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				score: 100,
				flag: true,
				data1: [1, 3, 6, 9, 14],
				data2: [{
						id: 1,
						name: '星星'
					},
					{
						id: 2,
						name: '月亮'
					},
					{
						id: 3,
						name: '贩卖机'
					}
				],
				evname:'click',	

			},
			methods:{
				xxx(){
					console.log('xxx方法被调用!!!')
				}
			}

		})
	</script>
</html>


计算属性监听属性
4、计算属性

   计算属性可用于快速计算视图(View)中显示的属性。这些计算将被缓存,并且只在需要时更新

   computed:{}

 

   

 

5. 监听属性

   监听属性 watch,我们可以通过 watch 来响应数据的变化

   watch:{}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue计算属性监听属性</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- <script src="../js/vue.js"></script> -->
	</head>
	<body>
		<div style="margin-left: 700px;">
			<!-- 边界 -->
			<div id="app">

				<ul>
					<li>
						<h3>计算属性</h3>
						单价:<input type="text" v-model="price" />
						数量:<input type="text" v-model="num" />
						总价:{{total}}
					</li>
					<li>
						<h3>监听属性</h3>
						km <input type="text" v-model="km" />
						m <input type="text" v-model="m" />
					</li>



				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				price: 25,
				num: 1,
				km: 1,
				m: 1000
			},
			/* 计算属性 */
			computed: {
				total() {
					return parseInt(this.price) * parseInt(this.num);
				}
			},
			/* 监听属性 */
			watch: {
				km(v) {
					this.m = v * 1000;
				},
				m(v) {
					this.km = v / 1000;
				}
			}


		})
	</script>
</html>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值