vue 基础知识

简介

Vue(读音/vju:/,类似于view)是一用于构建用户界面的渐进式JavaScript框架。与其它框
架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三
方库或既有项目整合。另-方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持
的库开发的复杂单页应用。
Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
 

 一、单向绑定数据 v-bind

v-bind特性被称为指令。指令带有前缀V-
除了使用插值表达式{}进行数据渲染，也可以使用V- bind指令,它的简写的形式就是一个冒
号(:)
 

2、双向绑定数据v-model

data: {
searchMap:{
keyWord:长歌行’
}
<!-- v-bind:value只能进行单向的数据渲染-->
<input type=text v-bindivalue=' searchMap keyWord'>
<!-- v-model可以进行双向的数据绑定->
<input type=text' v-model-'searchMap.keyWord'>
<ρ>您要查询的是: {searchMap.keyWord)}</P>

3、方法methods

var ss= new Vue({
				el:'#app',
				methods:{
					say1(){
						alert('我的心')
					},
					say2(){
						alert('在等待')
					},
					say3(){
						alert('永远在等待')
					}
				},
				data(){
					return{}
				}
			})

4、修饰符

<div id="app">
	<h3>事件修饰</h3>
	<p>.once 执行一次 .stop阻止事件冒泡 .prevent 阻止默认事件</p>
	<div class="parent" @click='say2()'>
	<div class="son" @click.stop.once='say1()'>
	<a href="https://www.baidu.com" @click.prevent.stop='say3()'>百度</a>
	</div>
	</div>
	</div>
		<script>
			var ss= new Vue({
				el:'#app',
				methods:{
					say1(){
						alert('我的心')
					},
					say2(){
						alert('在等待')
					},
					say3(){
						alert('永远在等待')
					}
				},
				data(){
					return{}
				}
			})
		</script>

修饰符(Modifiers)是以半角句号(.) 指明的特殊后缀，用于指出一个指令应该以特殊方式
绑定。
例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault):
即阻止事件原本的默认行为

5、条件渲染
v-if:条件指令

<div class="doms">
			<h3>v-else-if</h3>
			<p v-if="rest>=90">优秀</p>
			<p v-else-if="rest>=80">良好</p>
			<p v-e1se-if="rest>=70">中等</p> 
			<p v-else-if="rest>=60" >及格</p>
			<p v-e1se>不及格</p> 
		    <h1>v-show</h1>
		    <p v-show='res'>从供需关系</p>
		<!-- v-if通过移除dom 实现
		v-show 通过css -->

		</div>
		<script>
			var ms=new Vue({
				el:'.doms',
				data(){
					return{
						res:true,
						rest:85
					}
				}
			})
		</script>

六 属性渲染

<div class="texts">
		
		<p>{{msg}}</p>
		<input type="text" v-model="msg" >
		<p v-bind:title="titl" >长沙十大阿迪斯</p>
		
		<p :title=”titl" >撒旦发顺丰</p>
		<h3>表单属性绑定</h3>
		<p>
		<input type="checkbox" v-model= "flag" /> 
		</p>
		=
		<button v-bind:disabled="!flag" >注册</button>
		</div>
		<script>
			var sm = new Vue({
			el:".texts"
			data(){
			return {
			titl: "中国伟大的祖国"，
			flag: false,
			}
			}
			})

		</script>

七列表渲染

<div id=" app">
			<h3>复杂列表对象</h3>
			<p v-for=" (item, index) in ls" :key=" item .name">

			</p>
			<h3>对象</h3>
			<p v- for="(value,k) in yang" :key="k">{{k}}- {{value}}</p>
			<h3>渲染数字</h3>
			<p v-for='item in 5' :key='item'>{{item}}</p>
			<h3>列表渲染指令</h3>
			<p v-for='item in list' :key='item'>{{item}}</p>
			<h3>列表渲染指令带索引</h3>
			<p v-for='(item,index) in list' :key='item'>{{index+1}}</p>
			<p v- for="(item, index) in list" :key=" item">{{index+1}}- {{item}}</p>
			<h3>优化列表渲染</h3>
			<p v- for="(item, index) in list" v - bind: key=" index">{ { index+1}}- {{item}}</p>
			<p>key帮助优化vue内部渲染，key值要求是唯一 ， 还不建议用index,会取数据的id</p>
			<script>
				var vm = new Vue({
							el: " #app'”,
							data() {
								return {
									ls: [{
											name: "123 ",
											age: 18
										},
										{
											name: "181",
											age: 18
										},
										{
											name: " zq1",
											age: 18
										},
										list: ['01', '02', ' 03r', ' 04']，
										yang: {
											"name": "sss",
											age: 222,
											sex: "ssd"
										}
									}
								}
							})
			</script>

八 watch监听 计算器案例

<div class="cgx">
			<input type="text" v-model.number='num.n1'>
			<select name="" id="" v-model='num.type'>
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">x</option>
				<option value="/">梅</option>
			</select>
			<input type="text" v-model.number='num.n2'>
			<button>=</button>
			{{result}}
		</div>
		<script>
			var vm=new Vue({
				el:'.cgx',
				watch:{
					'num':{
						handler(){
							this.result=eval(this.num.n1+this.num.type+this.num.n2)
						},
						deep:true
					}
				},
				data(){
					return{
						result:0,
						num:{
							n1:0,
							n2:0,
							type:'+'
						}
					}
				}
			})
		</script>

九 filter 过滤

<div class="cgx">
			<h1>filter 过滤</h1>
			<P>{{'我的心'|hide}}</P>
			<p>{{'在等待'|hide}}</p>
			<p>{{100}}-100.00</p>
			<p>{{3.1415926535}}-3.14</p>
			<p>{{3.1415926535|fix(2)}}</p>
		</div>
		<script>
			var vm=new Vue({
				el:'.cgx',
				filters:{
					fix(val,arg=2){
						return Number(val).toFixed(2)
					}
					hide(val){
						var str=val.split('');
						str[1]='*'
						return str.join('')
						
					}
				}
				data(){
					return{
						
					}
				}
			})

十 vue 购物车案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			table {
				border: 1px solid #000;
				border-collapse: collapse;
				border-spacing: 0;
			}

			th,td {
				padding: 8px 16px;
				border: 1px solid #000;
				text-align: left;
			}

		+
		</style>
	</head>
	<body>
		<div id="app">
			<div v-if="books.length">
				<table>
					<tr>
						<th></th>
						<th>书籍名称</th>
						<th>出版日期</th>
						<th>价格</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>
					<tbody>
						<tr v-for="(item,index) in books">
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.data}}</td>
							<!-- <td>{{getFinalPrice(item.price)}}</td> -->
							<td>{{item.price| showPrice}}</td>
							<td>
								<button @click="inc(index)" :disabled="item.count <=1 ">-</button>
								{{item.count}}
								<button @click="add(index)">+</button>
							</td>
							<td><button @click="removebooks(index)">移除</button></td>
						</tr>
					</tbody>
				</table>
				<h2>总价格:{{totalPrice|showPrice}}</h2>
			</div>
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data: () => ({
					books: [{
							id: 1,
							name: '《小红书》',
							data: "2022-08-25",
							price: 89.00,
							count: 1
						},
						{
							id: 2,
							name: '《小黄书》',
							data: "2022-07-25",
							price: 89.00,
							count: 1
						},
						{
							id: 3,
							name: '《小蓝书》',
							data: "2022-05-25",
							price: 89.00,
							count: 1
						},
						{
							id: 4,
							name: '《小绿书》',
							data: "2022-04-25",
							price: 89.00,
							count: 1
						},
						{
							id: 5,
							name: '《小情书》',
							data: "2022-06-25",
							price: 89.00,
							count: 1
						}
					],
				}),
				computed: {
					totalPrice: function() {
						// 1、
						let totalPrice = 0
						for (let i = 0; i < this.books.length; i++) {
							totalPrice += this.books[i].price * this.books[i].count
						}
						return totalPrice
					}
				},
				methods: {

					add: function(index) {
						this.books[index].count++
					},
					inc: function(index) {

						this.books[index].count--
					},
					removebooks: function(index) {
						this.books.splice(index, 1)
					}
				},
				filters: {
					showPrice: function(price) {
						return '￥' + price.toFixed(2)
					}
				}
			})
		</script>
	</body>
</html>