R1c华陈数据科技
Vue.js 模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值文本
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
- <div id="app">
- <p>{{ message }}</p>
- </div>
复制代码 Html
使用 v-html 指令用于输出 html 代码：
- <div id="app">
- <div v-html="message"></div>
- </div>
-
- <script>
- new Vue({
- el: '#app',
- data: {
- message: '<h1>菜鸟教程</h1>'
- }
- })
- </script>
复制代码 属性
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
- <div id="app">
- <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
- <br><br>
- <div v-bind:class="{'class1': class1}">
- directiva v-bind:class
- </div>
- </div>
-
- <script>
- new Vue({
- el: '#app',
- data:{
- class1: false
- }
- });
- </script>
复制代码 表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
- <div id="app">
- {{5+5}}<br>
- {{ ok ? 'YES' : 'NO' }}<br>
- {{ message.split('').reverse().join('') }}
- <div v-bind:id="'list-' + id">菜鸟教程</div>
- </div>
-
- <script>
- new Vue({
- el: '#app',
- data: {
- ok: true,
- message: 'RUNOOB',
- id : 1
- }
- })
- </script>
复制代码 指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
- <div id="app">
- <p v-if="seen">现在你看到我了</p>
- </div>
-
- <script>
- new Vue({
- el: '#app',
- data: {
- seen: true
- }
- })
- </script>
复制代码
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
- <div id="app">
- <pre><a v-bind:href="url">菜鸟教程</a></pre>
- </div>
-
- <script>
- new Vue({
- el: '#app',
- data: {
- url: 'http://www.runoob.com'
- }
- })
- </script>
复制代码
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
- <a v-on:click="doSomething">
复制代码
- <div id="app">
- <pre><a v-bind:href="url">Vue参数</a></pre>
-
- </div>
-
- <div id="app2">
- <p v-for="val in arr">
- {{val.a}}
- </p>
- <a v-on:click="tap">点我</a>
- </div>
-
-
- <script>
- new Vue({
- el: '#app',
- data: {
- url: 'http://www.cncml.com'
- }
- })
- new Vue({
- el: '#app2',
- data: {
- arr:[
- {a:'bb'},
- {a:'cc'}
- ]
- },
- methods:{
- tap : function(){
- this.arr.unshift({a:'new'})
- }
- }
- })
- </script>
复制代码
|
