Vue基础+理解

最新推荐文章于 2024-05-23 15:59:29 发布

Lee_yuki

最新推荐文章于 2024-05-23 15:59:29 发布

阅读量108

点赞数

分类专栏： vue 文章标签： html5 vue

本文链接：https://blog.csdn.net/qq_44548247/article/details/90383841

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue.js概念

Vue.js是前端的主流框架之一，和Angular.js、React.js并称为前端三大主流框架。
Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue.js与Jquery的区别：从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。通俗地讲，jQuery旨在更方便地选取和操作dom对象，而vue的核心思想就是尽量让程序员不去进行dom操作。

Vue.js基本语法

Vue构造器

var vm = new Vue({
				el:"#app",
				data:{
					arr:['我是图图小淘气','面对世界很好奇'],
					message:'这是我的message'
				}
			})

el：用来表示DOM元素的id，可以为".app"，但是构造的Vue对象只会实例化第一个DOM元素。
data：用于定义数据，在DOM元素中可以使用 {{ }} 来输出对象属性和函数返回值；

	<!--分别输出"我是数组元素00" "我是数组元素01"-->
	<h1>{{this.arr[0]}}</h1> 
	<h2>{{this.arr[1]}}</h2>

methods：用于定义函数，可以通过return来返回函数值。

插值模板语法

文本插值
DOM操作与VUE的数据改变的看法：例如微信小程序设计中直接用赋值操作符修改数据，页面上的显示的数据不会随之而改变，而是利用setData来修改数据，监听底层数据的改变。dom操作中当数据改变后,但是界面不会改变，因为是数据的一次渲染，取得是数据，而不是数据空间。vue框架中双向数据动态绑定，底层监听数据，当对象数据发生变化，界面重新渲染。

		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					arr:['我是数组元素00','我是数组元素01'],
					message:'这是我的message'
				}
			})
			
			btn.onclick = function(){
				vm.arr[0]='我是改过的数组元素00'
				vm.arr[1]='我是改过的数组元素01'
				vm.message='我是改过的message'
			}
		</script>

在v-html、v-text中不写{{}} ， this可写可不写（可以看做VUE框架自身带有this属性）。
v-html插入的是html文本，v-text插入的是普通文本，不能识别标签

	<p v-html='this.message'></p>
	<p v-html='message'></p>
	<p v-html="'<h1>hello</h1>'"></p>
	<p v-text="'<h1>hello</h1>'"></p>

注这里引号并不是字符串，应为标识符（变量、函数）。

	<!--这样才是字符串-->
	<p v-html="'hello'"></p>
	<!--错误语法 这里hello是标识符 未找到该变量-->
	<!--<p v-html="hello"></p>-->
	<!--不报语法错误，整个板块不渲染 双大括号叫插值表达式，插值表达式只在内容区域使用-->
	<!--<p v-html="{{this.message}}"></p>-->
	<!--<p v-html="{{message}}"></p>-->

在本例子中，值得注意的是，若我们不写 vm.message=‘我是改过的message’ 这行代码，界面仍然不会修改，涉及原型链的问题。

属性插值
HTML 属性中的值应使用 v-bind 指令，该指令用于双向数据绑定。vue中v-bind：都可以冒号：简写，this可写可不写

	<body>
		<style type="text/css">
			.danger {
				background-color: red;
			}
			.info {
				background-color: blue;
			}
			.large{
				font-size: 40px;
			}
		</style>
		<div id="div1">
			<!--冒号后面判定布尔值 冒号前面为类名  此处应有两个类名-->
			<p v-bind:class="{danger：this.danger,large:large}">{{this.title}}</p>

			<!-- 可编辑文本框 引号里判断是否为true 第三四种为取JS值里的值控制-->
			<p contenteditable="true"></p>
			<p contenteditable="suibianxie"></p>
			<p v-bind:contenteditable="contenteditable1"></p>
			<p :contenteditable="contenteditable1"></p>
			
			<!-- 里面也可以执行JS语句 可以计算表达式可以为函数 -->
			<!-- <p :class="{info:fn()}"></p> -->

			<!--图片绑定三种方法 第一种为静态方法 第二三种可以获得JS标识符-->
			<img src="./img/18.jpg"/>
			<img v-bind:src="img1"/>
			<img :src="img1"/>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#div1",
				data:{
					title:"vue属性插值",
					info:true,
					danger:false,
					large:true,
					img1:"./img/18.jpg",
					contenteditable1:true
				}
			})
		</script>
	</body>

表达式插值
Vue.js 都提供了完全的 JavaScript 表达式支持。（比如三目运算符、算术表达式等）

常见指令

v-if与v-show

v-if与v-show引号里都会进行为布尔量的判断，true展示为false不展示。
一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁的切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。
区别:v-show使用的是css中的display:none 样式，在呈现树中没有，文档树中有,物理内存中有，更多渲染消耗。v-if:内存动态变化，不适用于频繁切换。

<body>
    <div id="app">
        <img src="./image/0.jpg" alt="" v-if='display'>
        <img src="./image/1.jpg" alt="" v-show='show'>
    </div>
    <button type="button" id="btn">dom的btn</button>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                display: true,
                show: false
            }
        })
        var flag = false
        btn.onclick = function () {
            flag = !flag
            if (flag) {
                vm.display = true
            } else {
                vm.display = false
            }
        }
    </script>
</body>

v-on
v-on指令用于绑定事件监听器。事件类型由参数指定。 vue中v-on：都可以@简写

<body>
    <div id="app">
        <button v-on:click="fn">button按钮绑定v-on点击</button>
        <input type="button" v-on:click='fm' value="input按钮绑定v-on点击">
        <input type="text" v-on:input='fg'>
        <button type="button" @click="fy">v-on的@简写</button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                display: true,
                show: true
            },
            methods: {
                // fn优先执行
                fn:() {
                    console.log("fn在执行 button按钮绑定v-on点击")
                },
                fm() {
                    console.log("fm在执行 input按钮绑定v-on点击")
                },
                fg() {
                    console.log("fg在执行 input按钮绑定v-on输入")
                },
                fy() {
                    console.log("fy在执行 v-on的@简写")
                }
            }
        })
        function fn() {
            console.log("当有两个相同函数，先在vue中寻找")
        }
    </script>
</body>

v-else与v-else-if
v-else就是JavaScript中的else的意思,v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块，可以链式的多次使用。

<div id="app">
	<div v-if="type === 'A'">  A  </div>
	<div v-else-if="type === 'B'">  B  </div>
	<div v-else-if="type === 'C'">  C  </div>
	<div v-else>  Not A/B/C  </div>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			type: 'C'
		}
	})
</script>

v-bind
v-bind指令用于响应更新HTML特性，将一个或者多个attribute，或者一个组件prop动态绑定到表达式。在绑定class或者style时，支持其他类型的值，如数组或对象。

<div id="app">
	<div v-bind:class="[classA,{classB:isB,classC:isC}]">hahaha</div>
</div>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			classA: 'A',
			isB: false,
			isC: true
		}
	})
</script>
<style type="text/css">
	.A {
		color: red;
	}
	.classC {
		font-size: 50px;
	}
</style>

Lee_yuki

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础+理解

Vue.js概念Vue.js是前端的主流框架之一，和Angular.js、React.js并称为前端三大主流框架。Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue.js与Jquery的区别：从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接...
复制链接

扫一扫