Vue是什么
Vue是一套用于构建用户界面的渐进式框架。简单来说呢就是Vue是前端框架。
如何来用Vue
如果是想简单方便可以直接引入Vue的开发环境版本即可
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
如果是开发的话建议在项目中下载Vue
npm install vue
这样就可以在项目中直接使用啦
来实现我们第一个Vue的实例吧:首次我用的是引入vue的官方路径也就是上上方的script那句。
<body>
<div id='app'>
<h1>{{msg}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*vue是数据驱动的框架,不需要开发者操作dom,只需关心数据就可*/
const vueMsg=new Vue({
/*el 指定了当前创建的vue实例发挥作用的范围,也就说当前的vue实例只能在id为app的dom范围内生效;具体表现就是当前的data属性中数据只有在id为app的div内部可以使用*/
el:'#app',
/* data属性存储着当前vue实例要使用的数据*/
data:{
msg:'hello vue'
}
})
</script>
{{}}是什么
{{}}是vue中的模板语法
插值表达式:{{}},也叫Mustache语法,小胡子语法,因为长得像胡子。
- 解释:使用 {{}} (插值表达式)从 data 中获取数据,并展示在模板中
- 说明: {{}} 中只能出现JavaScript表达式
- 说明:数据对象的属性值发生了改变,插值处的内容都会更新
<body>
<div id="app">
<!-- <h1>{{msg}}</h1> -->
<!-- <span>{{n+m}}</span> -->
<!-- <img v-bind:src="imgurl" alt=""> -->
<!-- <span v-text="msg"></span> -->
<span v-html="msg"></span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// document.querySelector('h1').innerText='hello vue!!'
// 创建实例
// const app=new Vue({
// /*el指定了当前创建vue实例发挥作用的范围,也就是说当前vue实例只在id为app
// 的dom范围内生效,具体表现就是当前的data属性中的数据只有在 id为app的div内部中可以使用*/
// el:"#app",
// // data属性存储当前vue实例要使用的数据
// data:{
// msg:'hello vue!!!'
// }
// })
// 插值表达式 设置元素内容 部分设置表签内容
// const app=new Vue({
// el:"#app",
// data:{
// n:1,
// m:2
// }
// })
// v-bind指令
/*插值表达式不能作为属性的值使用,只能放到开始标记和结束标记之间,
也就是说插值表达式只能设置标签的内容
只需在普通属性前加v-bind:,则这个属性值就可以接受动态的变量data中的值
*/
// const app = new Vue({
// el: "#app",
// data: {
// imgurl: './images/1.jpg'
// }
// })
// v-text指令 设置的是整体内容
// const app=new Vue({
// el:'#app',
// data:{
// msg:'hello vue!!'
// }
// })
// v-html指令 可以渲染标签
const app=new Vue({
el:'#app',
data:{
msg:'<h1>今天天气真好</h1>'
}
})
</script>
其中因为涉及到了一些vue的指令,都有表明注释,多半能看明白,不懂得后期会有更新。
今日先到这里了 拜拜撒