标签：inpu query 内容 alert tps function 界面 双向 func
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- {{}} 用于标签内显示数据 -->
Hello , {{msg}} <br>
<!-- v-model 进行数据双向绑定 -->
<input type="text" v-model="msg">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:‘#app‘, // 指定被vue管理的入口,值为选择器，不可以指定body或者html
data:{ // 初始化数据，在vue实例管理的Dom节点下，可以通过模板请求来引用
msg: ‘你好啊，王佳伟同学，你最棒！‘
}
})
</script>
</body>
</html>
MVVC模型是 Model-View-ViewModel 的缩写，是一种软件架构风格。
他的哲学思想上：
Model - 代表模型，就是数据对象，data
View - 代表视图，就是模板页面
ViewModel - 视图模型，本质上就是Vue实例
原理哈！ view 的值被更改了之后，DOM Listeners 监听到输入框的值发生改变之后，会将 Model 中的数据进行更新。更新了之后，在通过 Data Bindings 数据绑定，将更新的Model中的数据渲染到 View 页面。
上面的过程不需要我们开发者手动去进行操作，Vue已经帮我们完成了。我们只需要在页面上遵守Vue 的语法规则就可以自动帮我们实现以上功能。
Vue Devtools 插件可以让我们在一个更友好的界面中审查和调试Vue项目。
推荐在浏览器上安装 Vue Devtools。
可生成动态的 HTML 页面，页面中使用嵌入 Vue.js 语法动态生成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
{{JS表达式}}
-->
<div id="app">
<h3>1. {{}}双大括号输出文本内容</h3>
<!-- 直接获取文本内容 -->
<p>{{ msg }}</p>
<!-- 直接执行JS表达式 -->
<p>{{ sorce + 1 }}</p>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:‘#app‘,
data:{
msg: ‘王佳伟，你最棒！‘ ,
sorce: 100,
}
})
</script>
</body>
</html>
通过 v-once 指令，只执行一次性的插值，当数据改变的时候，插值处的数据不会被更新。
<h3>一次性插值 v-once</h3>
<p v-once>{{msg}}</p>
使用 v-once 修饰之后，当 msg 数据发生变化时，Dom元素上的数据也不会在更新。如果以后有相应的需求可以使用这个标签，但是使用的比较少，基本上不会使用，但是以防万一，遇到类似的需求知道有这个东西。
允许直接渲染标签，而不是以文本的方式渲染。
<p>v-html的形式：<span v-html="contentHtml"></span></p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
{{JS表达式}}
-->
<div id="app">
<h3>1. {{}}双大括号输出文本内容</h3>
<!-- 直接获取文本内容 -->
<p>{{ msg }}</p>
<!-- 直接执行JS表达式 -->
<p>{{ sorce + 1 }}</p>
<h3>一次性插值 v-once</h3>
<p v-once>{{msg}}</p>
<h3>指令输出真正的HTML内容 v-html</h3>
<p>双大括号的形式：{{contentHtml}}</p>
<p>v-html的形式：<span v-html="contentHtml"></span></p>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:‘#app‘,
data:{
msg: ‘王佳伟，你最棒！‘ ,
sorce: 100,
contentHtml:`<span style="color:red">王佳伟，你最棒！
<script>alert("我是大傻逼！")<\/script>
</span>`
}
})
</script>
</body>
</html>
完整格式：
v-bind:元素的属性名=‘xxxx‘
缩写格式：
:元素属性名 = ‘xxx‘
作用：将数据动态绑定到指定元素属性上面。
完整格式：
v-on:事件名称="事件处理函数名"
缩写格式：
@事件名称 = "事件处理函数名" 注意：@后面没有冒号
作用：用于监听DOM事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
{{JS表达式}}
-->
<div id="app">
<h3>1. {{}}双大括号输出文本内容</h3>
<!-- 直接获取文本内容 -->
<p>{{ msg }}</p>
<!-- 直接执行JS表达式 -->
<p>{{ sorce + 1 }}</p>
<h3>一次性插值 v-once</h3>
<p v-once>{{msg}}</p>
<h3>指令输出真正的HTML内容 v-html</h3>
<p>双大括号的形式：{{contentHtml}}</p>
<p>v-html的形式：<span v-html="contentHtml"></span></p>
<h3>元素绑定指令 v-bind</h3>
<!-- 完整 -->
<img v-bind:src="imgUrl">
<!-- 简化 -->
<img :src="imgUrl">
<h3>事件绑定指令 v-on</h3>
<input type="text" value="1" v-model="num">
<!-- 完整 -->
<button v-on:click="add">完整点击 +1</button>
<!-- 简化 -->
<button @click="add">简化点击 +1</button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:‘#app‘,
data:{
msg: ‘王佳伟，你最棒！‘ ,
sorce: 100,
contentHtml:`<span style="color:red">王佳伟，你最棒！
<script>alert("我是大傻逼！")<\/script>
</span>`,
imgUrl:‘https://profile.csdnimg.cn/B/9/A/3_weixin_42776111‘,
num : 1
},
methods:{
add:function(){
this.num ++
}
}
})
</script>
</body>
</html>
标签：inpu query 内容 alert tps function 界面 双向 func
原文地址：https://www.cnblogs.com/wjw1014/p/13376071.html
