vue

最新推荐文章于 2024-06-12 08:41:10 发布

yaoxu919

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/yaoxu919/article/details/106819058

版权

Vue

新建vue对象

引用vue.js

 <script src="./vue.js"></script>

新建Vue实例

<div id="first"></div>

使用

<script type="text/javascript">
		let app = new Vue({
			el: "#app",    //element   挂载节点
			data:{
				message:'hello world!',
				title:"first  page"
			}
		});
		
		console.log(app.message)
</script>

el: 虚拟dom的挂载节点

data: vue实例里面的数据

使用：

	1. {{ value_name }}
	2. v-bind:attr="value_name"

vue实例的组成

el：挂载虚拟dom的节点 vue.$mount

data: 数据，vue数据的属性

methods: 方法

template: 视图模板

computed: 计算属性，有点类似与methods

watch: 监听侦听属性

8个生命周期钩子函数

会在vue实例运行在相应阶段自动调用的。

beforeCreate：生命周期钩子。

created: 生命周期的第二个钩函数，可以进行页面初始化数据的请求

beforeMount: 产生虚拟dom之前

mounted: 以及产生虚拟dom，并且以及将页面的el进行了替换

beforeUpdate：进行虚拟dom更新之前，每一次数据变化都会产生

updated：更新成功之后的钩子函数

deforeDestory: vm实例摧毁之前

destoryed: vue实例已经被摧毁。

methods: 指定vue实例需要使用的方法。

computed：与data里面的数据是有趣别的，computed是根据data里面的数据变化进行变化的。

指令

v-bind : 将数据与属性绑定简写：：
v-html: 会将字符串解析成html
v-text: 会将字符串直接按照普通文本输出
v-if : 条件判断 v-else v-else-if 用于控制标签的显示
v-else：条件成立的时候不显示，配合v-if使用
v-else-if：条件成立的时候显示，配合v-if使用
v-once:关联的实例，只渲染一次
v-for : 循环遍历
v-model :双向绑定，视图和数据相互影响
v-show决定是否显示渲染元素
v-on : 事件绑定处理事件简写： @

<button v-on:click="clickButton()">Click Me</button>

注意：条件渲染内部会根据标签的内容进行最小替换，也就是有可能发生不替换标签只替换属性的可能，如果想要一定替换标签，需要添加key‘的属性。这个属性是唯一值。

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

v-show: 虽然操作的也是display，但是类似于操作的是visibility： visable | hidden；会有一个行间的display:none。

组件

Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

Prop 实例

<div id="app">
    <child message="hello!"></child>
</div>

<script>
Vue.component('child', {
  props: ['message'],
  template: '<span>{{ message }}</span>'
})
new Vue({
  el: '#app'
})
</script>