VUE学习-基础（基础语法 & 模板语法）

2022-08-13 10:03:26 阅读：150 来源： 互联网

标签：el VUE text app 语法 Vue new data 模板

基础语法

引入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,模板
来源： https://www.cnblogs.com/-LemonWater-/p/16582080.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9