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