vue理论基础知识

最新推荐文章于 2022-09-14 11:14:31 发布

需要休息

最新推荐文章于 2022-09-14 11:14:31 发布

阅读量895

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_48117019/article/details/108242408

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、Vue基础知识

1、前端三大主流框架：Vue.js、Angular.js、React.js

2、 Vue遵循MVVM模式，MVVM（model view viewModel）, 本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI和业务逻辑分开。

3、数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值，使用 v-html 指令用于输出 html 代码，表达式{{5+5}}的结果为10。

4、 HTML 属性中的值应使用 v-bind 指令，事件监听使用v-on指令

5、什么是双向数据绑定？

View层中数据的更新会及时更新到model中，model中的数据更新会及时渲染到view中。这种方式叫做双向数据绑定

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

6、缩写：

Vue.js 为两个最为常用的指令提供了特别的缩写：

v-bind缩写

<a v-bind:href="url"></a>

<!-- 缩写 -->

<a :href="url"></a>

v-on缩写

<a v-on:click="doSomething"></a>

<!-- 缩写 -->

<a @click="doSomething"  ></a>

7、 Vue条件语句的三种写法分别是：v-if,v-else,v-else-if

8、 v-show与v-if的区别

v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

9、循环使用 v-for 指令，v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名

10、计算属性的关键词是：computed

11、 props是父组件用来传递数据的一个自定义属性。父组件的数据需要通过该属性把数据传给子组件。

12、子组件调用父组件的方法可以使用this.$emit()

13、让css只在当前组件中起作用的属性是scoped

14、计算属性和函数的区别

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

15、代码

显示出“vue学习”

<body>

		<div id="test">

			<h1>姓名：{{name}}</h1>

		</div>

		<script>

		 var info = new Vue({

		 	el:"#test",

		 	data:{

		 		name:"vue学习"

		 	}

		 })

		</script>

	</body>

关键点：

data 用于定义属性。

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

{{ }} 用于输出对象属性和函数返回值。

将html代码"
vue study！
"编译输出

<body>
		<div id="test">
			<div v-html="name"></div>
		</div>
		<script>
		 var info = new Vue({
		 	el:"#test",
		 	data:{
		 		name:"<h1>vue study！</h1>",
		 	}
		 })
		</script>
</body>

关键点：v-html 指令用于输出html代码。

使用v-bind指令指定class选择器

<style type="text/css">
	.red{background-color:#f00}
</style>
<div id="test">
			<div v-bind:class='style1'>{{name}}</div>
         <!--缩写形式-->
 		<div :class='style1'>{{name}}</div>
</div>
<script>
		  var info = new Vue({
		  	el:"#test",
		  	data:{
            name: "vue学习",
		  		style1:'red'
		  	}
		  })
</script>

关键点：v-bind指令用于控制html属性的值。

使用v-bind指令指定href属性

<div id="test">
			<a v-bind:href="url">百度</div>
</div>
<script>
		  var info = new Vue({
		  	el:"#test",
		  	data:{
		  		name:' vue学习',
		  		url:'http://www.baidu.com'
		  	}
		  })
</script>

关键点：v-bind指令用于控制html属性的值。

v-for 绑定数据到数组来渲染一个列表

<ol id="test">
			<li v-for="site in sites">
				{{site.name}
			</li>
		</ol>
		<script>
			var info = new Vue({
				el:'#test',
				data:{
					sites:[
					{name:'zhangsan'},
					{name:'lisi'},
					{name:'wangwu'}
					]
				}
			})
		</script>

v-for 可以通过一个对象的属性来迭代数据

<ol id="test">
			<li v-for="value in object">
				{{value}}
			</li>
		</ol>
		<script>
			var info = new Vue({
				el:'#test',
				data:{
					object:{
						name:'张三',
						sex:'男',
						age:18
					}
				}
			})
		</script>

v-for迭代整数（打印出1，2，3…10）

<ul id="test">
			<li v-for="num in 10">
				{{num}}
			</li>
		</ul>
		<script>
			var info = new Vue({
				el:'#test'
			})
		</script>

使用计算属性computed修改如下字符串反转操作代码

<div id="test">
	      {{message.split('').reverse().join('')}}
		</div>
		<script>
			var info = new Vue({
				el:'#test',
				data:{
					message:'vue.js'
				}
			})
		</script>

代码修改后：

<div id="test">
	     {{reverseMessage}}
		</div>
		<script>
			var info = new Vue({
				el:'#test',
				data:{
					message:'vue.js'
				},
				computed:{
					reverseMessage:function(){
						return this.message.split('').reverse().join('');
					}
				}
			})
		</script>

点击按钮“增加1”，数值+1并显示

方法1：调用一个定义的方法

<div id="app">
	    	<button v-on:click="count+=1">增加1</button>
	    	<p>这个按钮被点击了{{count}}次</p>
	</div>
<script type="text/javascript">
			var info = new Vue({
				el:"#app",
				data:{
					count:1
				}
			});
		</script>

方法2：调用一个定义的方法

<div id="app">
		<button v-on:click="add">增加1</button>
		<p>这个按钮被点击了{{count}}次</p>
		</div>
<script type="text/javascript">
			var info = new Vue({
				el:"#app",
				data:{
					count:1
				},
				methods:{
					add:function(){
						this.count++
					}
				}
			});
	</script>

用 v-model 指令在input元素上创建双向数据绑定

<div id="app">
	    	<h1>input元素：</h1>
	    	姓名：<input v-model="message">
	    	<p>{{message}}</p>
	    	
	    </div>
		<script type="text/javascript">
			var info = new Vue({
				el:"#app",
				data:{
					message:'姓名'
				}
			});
		</script>

二、Vue-cli（脚手架）相关知识

16、 npm方法安装vue脚手架，前提是需要先安装node环境

17、脚手架（vue-cli）搭建与使用的常用命令

搭建脚手架命令：npm install -g @vue/cli
查看vue版本的命令：vue --version或vue -V
创建项目（如：项目名为test）: vue create test
启动项目：npm run serve
项目打包：npm run build
访问项目（8080端口）：http://localhost:8080/
安装axios：npm install axios

18、通过 Vue.js 可以实现多视图的单页Web应用，不管是访问的哪个视图，浏览器始终访问的都是App.vue这个页面，只不过在替换掉了对应内容

19、想要实现视图的跳转，需要先配置路由，配置的文件是router/index.js,配置的两种方法分别是：

方法1	方法2
import News from ‘…/views/News.vue’{ path: ‘/news’, name: ’ News ', component: News }	{ path: ‘/news’, name: ’ News ', component: () => import( ‘…/views/News.vue’)}

20、访问静态路由

<router-link to="/news">跳转到news</router-link>

21、访问动态路由（传值），分为两种方法，分别是params和query

22、 Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求

在这里插入图片描述

23、什么是跨域？

在浏览器里面域名、端口、ip地址、协议，有任何一项不同，则跨域，常用解决方法：代理服务器，操作方法：

1）在项目目录下新建文件vue.confit.js

2）加入代码

module.exports = {
    devServer:{
        host:'localhost',
        port:8080,
        proxy:{
           '/book':{
               target:'https://mini.zhangjiwei.top',//要跨域的域名
               changeOrigin:true//是否开启跨域
           },
           '/detail':{
            target:'https://mini.zhangjiwei.top',//要跨域的域名
            changeOrigin:true//是否开启跨域
        } 
        } 
    }
}

24、你所知道的基于 Vue 2.0 的桌面端组件库有：Element（或Element UI），Vant

需要休息

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue理论基础知识

一、Vue基础知识1、前端三大主流框架：Vue.js、Angular.js、React.js2、 Vue遵循MVVM模式，MVVM（model view viewModel）, 本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI和业务逻辑分开。3、数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值，使用 v-html 指令用于输出 html 代码，表达式{{5+5}}的结果为10。4、 HTML 属性中的值应使用 v-bind 指令，事
复制链接

扫一扫

专栏目录