基础语法
引入vue
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
声明式渲染
<div id="app">
<!-- v-bind attribute 被称为指令 -->
<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</span></div>
<script>
var app = new Vue({
el: '#app',
data: {message: '页面加载于 ' + new Date().toLocaleString()}
})
</script>
条件与循环
-
条件
<div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> var app = new Vue({ el: '#app', data: {seen: true} }) </script>
-
循环
<div id="app"> <ol> <li v-for="todo in todos">{{ todo.text }}</li> </ol> </div> <script> var app = new Vue({ el: '#app', data: { todos: [ {text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) </script>
处理交互
-
v-on
<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转消息</button> </div> <script> var app = new Vue({ el: '#app', data: {message: 'Hello Vue.js!'}, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script>
-
v-model
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> var app = new Vue({ el: '#app', data: {message: 'Hello Vue!'} }) </script>
注册组件
<div id="app">
<ol>
<!--为每个 todo-item 提供 todo 对象,提供为组件参数-->
<todo-item v-for="item in groceryList" v-bind:key="item.id"v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
</script>
实例properties
Vue 实例还暴露了一些有用的实例 property与方法。它们都有前缀 $
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 })
模板语法
插值
<!--1. 文本 -->
<span v-once>这个将不会改变: {{ msg }}</span>
<!--2. HTML -->
<!--动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。 -->
<span v-html="rawHtml"></span>
<!--3.Attribute -->
<div v-bind:id="dynamicId"></div>
<!--4.value是表达式 -->
<div v-bind:id="'list-' + id"></div>
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。
<!--1.静态参数 -->
<a v-bind:href="url">...</a>
<!--2.动态参数 -->
<!-- 空格和引号,放在 HTML attribute 名里是无效的 -->
<!-- 需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写 -->
<a v-on:[eventName]="doSomething"> ... </a>
<a v-bind:['foo' + bar]="value"> ... </a><!-- 这会触发一个编译警告 -->
<!--3.修饰符 -->
<form v-on:submit.prevent="onSubmit">...</form>
缩写
<!--1.v-bind -->
<a :href="url" :[key]="name">...</a>
<!--2.v-on -->
<a @click="doSomething" @[event]="doOtherthing">>...</a>
标签:el,VUE,text,app,语法,Vue,new,data,模板
From: https://www.cnblogs.com/-LemonWater-/p/16582080.html