vue双向数据绑定v-model案例以及其他基础指令复习（一看就懂）
数据绑定主要用到表单提交这块用到的。 用户输入内容，同步改变。
附录代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
比jQuery更好的框架。
vue
vue的基本使用
1 需要提供标签用于填充数据
2 引入vue.js 库文件
3 可以使用vue的语法做功能了
4 把vue提供的数据填充到标签里面
-->
<!--
1 实例参数分析
el 挂载， 关联
data 模型数据 值是一个对象。
2 插值表达式用法
将数据填充到HTML标签中
插值表达式支持基本的计算操作
3 vue代码运行原理分析
概述编程过程的概念 vue语法 原生语法
是因为vue 代码 通过vue框架，生成原生js代码，编译出来。计算机可以识别到。
之所以能在浏览器运行，为什么能在浏览器运行？
指令
数据响应式
h5 中的响应式
数据的响应式，数据的编号导致页面内容的变化
数据绑定
将数据填充到标签中
v-once 只编译一次
显示内容之后不再具有响应式功能
3.3 双向数据绑定
帮助注册 ，用户的交互。
表单 里面添加内容
v-model 指令
-->
<!-- vue程序书写第一条 首先是引入vue.js ! -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 一个变量的输出 -->
<div>{{msg}}</div>
<!-- 插值表达式，叫法老专业，其实就是一个计算表达式 -->
<div>{{1 + 2}}</div>
<!-- 字符串拼接 -->
<div>{{msg + '-----' + 123}}</div>
<!-- 下面是数据填充3个指令的使用 v-text指令 -->
<div v-text='msg'></div>
<!-- v-html指令 -->
<div v-html='msg1'></div>
<!-- v-pre 指令 -->
<div v-pre>{{msg}}</div>
<div v-once>{{info}}</div>
<!-- v-model指令 双向数据绑定 .上面插值表达式也跟随变化。 -->
<div>
<input type="text" v-model='msg'>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data: {
msg:'hello vue',
msg1:'<h1>html<h1>',
info:'nihao'
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号