VUE基础开发-------1---基础

最新推荐文章于 2022-09-05 17:05:11 发布

nzch

最新推荐文章于 2022-09-05 17:05:11 发布

阅读量186

点赞数

分类专栏： VUE XXD

本文链接：https://blog.csdn.net/qq_28764557/article/details/102681456

版权

XXD 同时被 2 个专栏收录

73 篇文章 0 订阅

订阅专栏

VUE

6 篇文章 0 订阅

订阅专栏

data里面声明变量然后引用。

如何用node下载，在路径上写cmd，然后进入控制台写cnpm install vue即可下载。

引包：引入vue.js

留坑：写个div给类名或者id名称

实例化：new Vue

注意下这个写法，会被替代了。就是模板替代了id=app。

data要写函数形式的。

template的根节点只能有一个。

代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!-- 留坑 -->
	<div id="app"></div>


	<!-- 引包 -->
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		// 实例化启动vue
		new Vue({
			el:'#app',//目的的，可以识别类名、id名和标签名，如果做到极致优化可以直接用document.getElementById获取
			template:`     
			<div>
				<div>我这里是模板内容{{ msg }}</div>
				<div>111</div>
			</div>
			`,//模板内容,根节点只能有一个
			data:function(){
				return {
					msg:'Hello Vue!'
				}
			}
		})
	</script>
</body>
</html>

---------------------------------------------------------------------1-2------------------------------------------------------------------------------------------

代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app"></div>
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		
		new Vue({
			el:'#app',
			template:`
			<div>
					<!--测试v-text-->
					<div v-text='mytext'></div>
					</hr>
					<!--测试v-html-->
					<div v-html='myhtml'></div>
					<!--测试v-if  v-else-if  v-else-->
					<button v-if='num==1'>测试v-if</button>
					<button v-else-if='num==2'>测试v-else-if</button>
					<button v-else>测试v-else</button>

					<!--测试v-show-->
					<div v-show='checkshow'>我是V-SHOW</div>
					<!--循环数组-->
					<ul>
					<li v-for='(item,index) in arrayfor'>
					{{ item }}-{{index}}
					</li>
					</ul>
					<ul>
					<!--循环对象-->
					<li v-for='(oj,key) in ojfor'>
					{{key}}:{{oj}}
					</li>
					</ul>
			</div>
			`,
			data:function(){
				return {
					mytext:'<h1>我这里是v-text</h1>',
					myhtml:'<h1>我这里是v-html</h1>',
					checkvif:true,
					num:6,
					checkshow:true,
					arrayfor:['篮球','足球','乒乓球'],
					ojfor:{play:'篮球',people:'ming',age:'19'}
				}
			}
		})
	</script>
</body>
</html>

----------------------------------------------------------------------------------------1-3----------------------------------------------------------------------------

单向数据绑定：内存可以影响页面，但是页面是不影响内存的。

单向：

双向数据绑定：内存和页面是互相影响的。双向数据绑定只作用于有value的元素的，不接属性值得。

代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		console.log(this)
		new Vue({
			el:"#app",
			template:`
				<div>
				单向数据绑定
				<input type='text' v-bind:value="name" :class="name"><br>
				双向数据绑定
				<input type='text' v-model="name"></br>
				{{ name }}
				<button v-on:click="change">点击我改变name变量</button>
				</div>

			`,
			data:function(){
				return {
					name:'hello'
				}
			},
			methods:{
				change:function(){
					console.log(this)
					this.name='我改变了，是在方法属性里面定义的方法'
				},
			}
		})
	</script>
</body>
</html>

写属性不用this的，注意这里的写法。

冒号是v-by的简写。

------------------------------------------------------------------------1-4-----------------------------------------------------------------------------------------

filters函数，过滤器需要先定义再使用不然会报错的：

代码：

<!DOCTYPE html>
<html>
<head>
	<title>过滤器</title>
</head>
<body>
		<div id="app">
			我输入的：<input type="text" name="" v-model='instring'></br>
			我输出的：{{ instring }}</br>
			{{ instring | reversal('翻转输出：')}}
		</div>

		<script type="text/javascript" src="vue.js"></script>
		<script type="text/javascript">

			console.log(this)
			Vue.filter('reversal',function(val,arg2){
				return  arg2+val.split('').reverse().join('')
			})
			new Vue({
				el:'#app',
				data(){
					return {
						instring:''
					}
				},
				created(){
					console.log(this,'vue的')
				}
				// filters:{
				// 	reversal(val,arg2){
				// 		//          字符串转数组  翻转    数组转字符串
				// 		return  arg2+val.split('').reverse().join('')
				// 	}
				// }
			})
		</script>
</body>
</html>

多个参数的话第一个参数一定是过滤的参数，还有就是只有一个参数就是需要过滤的数据就不写参数。

----

看一个知识点就是Vue中的this和我们平时的this的区别。

这个this是window。

这个是

--------------------------------------------------------------------1-5------------------------------------------------------------------------------------------------

同时监听两个参数：https://blog.csdn.net/CatEatApple/article/details/83617909

监听和计算，都是函数。

代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app">
		<div>watch监听数据</div>
		<input type="text" name="" v-model='msg.text'>
		<div>computed计算属性</div>
		(<input type="text" name="" v-model='n1'>+
		<input type="text" name="" v-model='n2'>)*
		<input type="text" name="" v-model='n3'>={{result}}
	</div>


	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		
		new Vue({
			el:'#app',
			data(){
				return {
					msg:{text:''},
					n1:'',
					n2:'',
					n3:'1'
				}
			},
			computed:{
				result(){
					return (Number(this.n1)+Number(this.n2))*Number(this.n3)
				}
			},
			watch:{
				// msg(newval,oldval){//简单的监听这个是是对象的话是不行的
				// 	if(newval.text=='love'){
				// 		alert(newval.text)
				// 	}
				// }
				msg:{
					handler(newval,oldval){
						if(newval.text=='love'){
							alert(newval.text)
						}
					},
					deep:true
				}
			}
		})
	</script>
</body>
</html>

result是函数也是属性的。

------1-6-----

watch的深度监听：https://www.cnblogs.com/mushitianya/p/10510105.html

nzch

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE基础开发-------1---基础

data里面声明变量然后引用。如何用node下载，在路径上写cmd，然后进入控制台写cnpm install vue即可下载。引包：引入vue.js留坑：写个div给类名或者id名称实例化：new Vue注意下这个写法，会被替代了。就是模板替代了id=app。data要写函数形式的。template的根节点只能有一个。代码：<!DOCTYPE h...
复制链接

扫一扫

专栏目录