1Vue
Posted pengsq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了1Vue相关的知识，希望对你有一定的参考价值。
一、起步
原理：
Vue.js数据驱动的原理在于View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。
反之，当Model层的数据发生改变时，也会通过Data Bingings来监听并改变View层的展示。从而实现双向数据绑定的功能。
例如：jQuery通过操作DOM来改变页面的显示，而Vue通过操作数据来实现页面的更新与展示。
这样我们就能很直观的理解数据驱动的意思了。
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，
其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
Vue.js 就是一个提供了 MVVM 风格的双向数据绑定的 javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，
也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性。
申
声明式渲染
<div id="start"> {{message}} </div> var start = new Vue({ el: "#start", data: { message: "helloWorld,helloVue!" } })
- el:Vue需要操作的元素节点
- data属性:每个 Vue 实例都会代理其
data对象里所有的属性。注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
常用指令介绍
v-cloak：还没有加载完vue.js会出现闪烁问题，这个可以解决
v-text：会覆盖元素中的文本内容
v-html：html 会覆盖元素中的文本内容
v-bind：绑定属性可以简写为 :属性名
v-on： 绑定事件 可以简写为 @事件名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
color:red;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
<p v-cloak>{{msg}}</p>
<h4 v-text="msg"></h4>
<!-- 默认 v-text 是没有闪烁问题的 -->
<!-- v-text 会覆盖元素中原本的内容, 但是插值表达式 只会替换自己的这个占位符， 不会把整个元素的内容清空 -->
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2">12345</div>
<!-- v-bind: 是Vue中用于绑定属性的指令 -->
<!-- <input type="button" value="按钮" v-bind:title="mytitle"> -->
<!-- 注意： v-bind: 指令可以简写为 :要绑定的属性 -->
<!-- v-bind 中，可以写合法的JS表达式 -->
<input type="button" value="按钮" v-bind:title="mytitle + ‘1233‘ ">
<!-- Vue 中提供了 v-on: 事件绑定机制 -->
<input type="button" value="按钮" v-on:click="show">
</div>
<!-- 1.导入Vue的包 -->
<script src="./lib/vue.js"></script>
<script>
var vm =new Vue({
el:"#app",
data:{
msg:"123",
msg2: "<h1>我是一个大大的h1, 我大，我骄傲</h1>",
mytitle: "这是一个自定义的title",
},
methods:{ //这个 methods 属性中定义了当前Vue实例所有可用的方法
show: function(){
alert("hello")
}
}
})
</script>
</body>
</html>
未完待续
以上是关于1Vue的主要内容，如果未能解决你的问题，请参考以下文章