vue-day01
vue?
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
vue简明例子
首先使用cdn引入vue.js文件，
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
。
vue.js？声明式渲染，条件循环指令，处理用户表单的输入，以及自定义组件，模板语法…
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>vue-01</title></head><body><divid="app">
{{message}}
</div><divid="app2"style="border: 1px solid red;"><spanv-bind:title="message">
鼠标悬停几秒查看信息
</span></div><divid="app3"><pv-if="seen">现在你看到我了</p></div><divid="app4"><ol><liv-for="todo in todos">
{{todo.text}}
</li></ol></div><divid="app5"><p>{{message}}</p><buttonv-on:click="reverseStr">点击反转</button></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>/*简单数据绑定,使用mustache语法将数据与app对象绑定*/let app =newVue({el:'#app',data:{message:'Hello Vue!'}});/*使用v-bind指令，响应式的更新html属性*/let app2 =newVue({el:'#app2',data:{message:"哈哈哈，我成功了！vue开始"}});/*使用v-if指令，根据值来判断对应元素是否显示*/let app3 =newVue({el:'#app3',data:{seen:true}});/*使用v-for指令，将todos中的内容遍历到html上*/let app4 =newVue({el:'#app4',data:{todos:[{text:"学习"},{text:"真的"},{text:"需要坚持"}]}});/*利用v-on:click来监听点击事件，然后对原本的字符串进行反转*/let app5 =newVue({el:"#app5",data:{message:"反转!"},methods:{reverseStr:function(){this.message=this.message.split('').reverse().join('')}}});</script></body></html>
这里是一些简明的例子，通过vue.js的模板语法声明式的将数据渲染到DOM中，然后利用到了一些 v-xxx 指令。
模板语法
- Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
- 所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
1. 使用
{{}}
Mustache语法将数据绑定到对应的实例
Mustache 标签将会被替代为对应数据对象上 msg property 的值，msg property发生改变，对应页面的数据也会发生改变。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app">
{{message}}
</div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let app =newVue({el:'#app',data:{message:'Hello Vue!'}});</script></body></html>
2.使用 v-once指令
v-once指令（一次性的插值，且数据改变时，插值内容不发生改变）。
<divid="app2"><spanv-once>不会改变的值:{{msg}}</span></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let app2 =newVue({el:'#app2',data:{msg:"我是一个常量"}});</script>
3.v-html指令
v-html指令的作用类似js中的element.innerHTML。 双大括号会被数据解析成为普通文本，为了输出html。
<divid="app3"><spanv-html="rawHtml">1111</span></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let app3 =newVue({el:'#app3',data:{rawHtml:"<span style ='color:red'>我是红色的</span>"}});</script>
将Vue实例中data属性值的rawHtml的值原样以文本输出，就是对应的span标签。
4.v-bind指令和v-on指令
v-bind指令，后面接冒号，可以响应式的更新html attribute,其中的attribute可选如下的值。
<buttonv-bind:disabled="isButtonDisabled"id="btn1">Button</button><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let btn1 =newVue({el:'#btn1',data:{isButtonDisabled:true,}});</script>
若把其中的isButtonDistabled属性值改为false,或者null，则意味着不再禁用按钮样式。
isButtonDisabled:false|null
通过v-bind指令的href属性，绑定对应的url值，完成超链接跳转。
<divid="app6"><av-bind:href="url">点我跳转xxx</a></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let app6 =newVue({el:'#app6',data:{url:"https://www.btmc.cn"}});</script>
v-on指令用于监听DOM事件。
可以在methods属性中，自定义自己需要的方法，用于对不同的点击事件做不同的处理。
一个简单的点击事件的例子：
<divid="app7"><av-on:click="doAlert()">嘿嘿，说了你别点我，烦呢！</a></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let app7 =newVue({el:'#app7',data:{message:"逗你玩，我一点也不生气，不生气"},methods:{doAlert:function(){alert(this.message);}}});</script>
5.动态参数，修饰符，指令缩写
动态参数
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
<a v-bind:[attributeName]="url"> ... </a>
等同于刚刚上面的
<a v-bind:href="url"> ... </a>
然后，动态参数表达式有一定的约束，比如空格和引号在[attributeName]是无效的，以及还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写。（Java中常用的驼峰也不行，它会把的attributeName全部转换为小写字符，所以在一开始定义时就要避免）。
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
--><av-bind:[someAttr]="value"> ... </a>
一个动态参数的小例子，上面其实就已经写过一个了，那就再写一个吧。
<divid="app8"><av-bind:[atr]="url">你猜我跳到哪里？</a></div><divid="app9"><buttonv-on:[events]="doAlert()">动态事件</button></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let app8 =newVue({el:'#app8',data:{atr:'href',url:'https://www.btmc.cn'}});let app9 =newVue({el:'#app9',data:{events:'click',message:"动态动态！"},methods:{doAlert:function(){alert(this.message);}}});</script>
对于v-bind:[attributeName]:value来说，动态参数就是意味着你的attributeName是在data属性中有定义的属性值，value也可以是。
对于动态事件，v-on[events]=“方法名”,events也是在data中有定义的属性值。
修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
一个例子，通过.prevent=绑定名字为ci的方法：
<divid="app10"><buttonv-on:click.prevent="ci">戳我</button></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let app10 =newVue({el:'#app10',data:{msg:'测试',},methods:{ci:function(){alert(this.msg);}}});</script>
指令缩写
Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind缩写
<!-- 完整语法 --><av-bind:href="url">...</a><!-- 缩写 --><a:href="url">...</a><!-- 动态参数的缩写 (2.6.0+) --><a:[key]="url"> ... </a>
v-on缩写
<!-- 完整语法 --><av-on:click="doSomething">...</a><!-- 缩写 --><a@click="doSomething">...</a><!-- 动态参数的缩写 (2.6.0+) --><a@[event]="doSomething"> ... </a>
指令缩写练习：
<divid="app11"><a:[hx]="url">..动态缩写连接</a></div><divid="app12"><button@[ev]="doResponse">动态参数缩写按钮事件</button></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let app11 =newVue({el:'#app11',data:{hx:'href',url:'https://www.btmc.cn'}});let app12 =newVue({el:'#app12',data:{ev:'click',msg:'啦啦啦，今天结束！'},methods:{doResponse:function(){alert(this.msg);}}});</script>
放假第一天，开始学习呐！
版权归原作者 杀死一只知更鸟debug 所有， 如有侵权，请联系我们删除。