1. vue引入
<!-- 路径不能写./的形式 用//的形式 -->
<script type="text/javascript" src="/js/vue.js"></script>
</head>
<body>
<script type="text/javascript">
Vue.config.productionTip = false;
</script>
2. 创建Vue对象
-
想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
new vue({})
-
root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
如插值{{}} -
root容器里的代码被称为【Vue模板】;
-
Vue实例和容器是一一对应的;
-
真实开发中只有一个Vue实例,并且会配合着组件一起使用;
-
{{xxx}}中的xxx要写js表达式 表达式会生成一个值,且xxx可以自动读取到data中的所有属性;
-
一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- //差值{{}} -->
<h1>hello,{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//创建vue实例
const x = new Vue({
el: '#root', //el用于指定当前vue实例为哪个容器服务 值为css选择器(getElementbyId)
data: { //用于存储数据
name: 'aaa'
}
})
vue模板语法两大类
vm上和vm的原型上的所有属性和方法 模板里都可以直接用
<button @click="ishot=!ishot">切换天气</button>
这里可以看出 事件里写了一句代码 这里用到的属性在vm里 而这句话在模板里 所以可以直接用!!!
【插值语法】{{}}【一个】
【指令语法】指令(以v-开头的自定义标签属性)【很多】
插值语法:
功能:用于解析标签体内容
写法:{undefined{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
重点:{{}}里可以读取到
1. vm里data的数据
2. 计算属性 computed里计算出来的
3. v-for里的形参
4. 函数的返回值 add() 但是要写()表示调用
指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)
举例:v-bind:href=“xxx” 或 简写为 :href=“xxx”,xxx同样要写js表达式,要加引号且可以直接读取到data中的所有属性
备注:写了v-bind: 后面的属性=“这里面的东西有效” 而不是属性名本身 是属性值
注意: v-bind可以简写为: v-model可以简写为vlue=
v-bind :绑定了一个属性 就vue实例就可以操作这个属性
这里面写函数 可以不写()但是不写无法得到参数event
—